如何在angularjs中获取自定义标签的属性值？

Question

我正在尝试使用angularJs 创建自定义标记.此标记具有名为的属性data.data得到它这样的价值<skillviz data="{{user.info}}"></skillviz>.user.info是一个JSON对象.但是,当我尝试data在我的指令定义中访问此属性时,我得到了undefined.这样做的正确方法是什么？

HTML代码

<div id="info-box" ng-repeat="user in users | orderBy:orderProp">            
          <div id="skill-block">
            <skillviz height="50" data="{{user.skills}}"></skillviz>
          </div>
      </div>

users是在控制器中声明的JSON类型对象.所以基本上users将是一个列表(数组)

{"first_name": "Tifanny",

        "last_name": "Maxwell",
        "skills": [
            {"name": "Java", "score": 4.8, "color" : "red"},
            {"name": "C++", "score": 4.0, "color" : "blue"},
        ]
    }, 

services.js

angular.module('yott', []).directive('skillviz', function () {
return {
    restrict: 'E',
    link: function (scope, element, attrs) {
        element.html("<script>alert(" + attrs['data'] + ")</script>");
        });
    }
  }
});

警告框弹出说未定义

Answer 1

假设您有以下标记:

<div ng-controller="MyController" data-id="someCustomValue">
</div>

现在,在您的控制器中,您可以执行以下操作来访问data-id:

app.controller('MyController', function ($scope, $attrs) {
  console.log($attrs.id); // Prints 'someCustomValue'
});

Answer 2

使用$observe观察属性的变化：

\n\n

attrs.$observe(\'data\', function(value) {\n  console.log(\'data has changed value to \' + value);\n});\n

\n\n

和$set改变值：

\n\n

attrs.$set(\'data\', \'new value\');\n

\n\n

@或者，您可以使用（绑定本地范围）将其传递/链接到指令范围， &（提供一种在父范围上下文中执行表达式的方法）或=（设置双向绑定）\xe2\x80\x93在这里解释

\n\n

angular.module(\'yott\', []).directive(\'skillviz\', function () {\n    return {\n        restrict: \'E\',\n        scope { data: "=data" },\n        link: function (scope, element, attrs) {\n            element.html("<script>alert(" +scope.data + ")</script>");\n            });\n        }\n      }\n    });\n

\n