如何在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>");
        });
    }
  }
});

弹出警告框说undefined

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观察属性的变化：

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

和$set更改值：

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

或者，您可以使用@（绑定本地范围）、&（提供在父范围的上下文中执行表达式的方法）或=（设置up 双向绑定) – 解释here

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