Angular JS观察指令属性答案

【问题标题】：Angular JS observe on directive attributeAngular JS观察指令属性
【发布时间】：2013-09-15 22:09:37
【问题描述】：

angular js 如何监视自定义指令上的属性以接受要绑定的角度值

这是我目前所拥有的：

<tile title="Sleep Duration" data-value="{{sleepHistory.averageSleepTime}}"/>

app.directive('tile', [function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var title = attrs.title;

            attrs.$observe('dataValue', function(val) {
                var data = val;

                console.log(data);

                var dom =
                    "<div>" +
                    "<p>" + title + "</p>" +
                    "<p>" + data + "</p>" +
                    "</div";

                $(element).append($(dom.trim()));
            });
        }
    };
}]);

但观察到的值返回为未定义

【问题讨论】：

标签： angularjs angularjs-directive javascript javascript-framework

【解决方案1】：

来自https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes：

所有这些在 Angular 中都被视为等效：

<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">

所以属性data-value 归一化为value

所以，这就是你想要的：

attrs.$observe('value', function(val) {

【讨论】：

【解决方案2】：

您也可以在指令中使用new attribute 而不是data-value：

<tile title="Sleep Duration"  your-new-attribute={{sleepHistory.averageSleepTime}}" />

attrs.$observe('yourNewAttribute', function (newValue, oldValue) {
    if (newValue && newValue !== oldValue) {
        // ...
    }
});

【讨论】：

【解决方案3】：

只需观看value 而不是dataValue。

attrs.$observe('value', function (val)  { ...

【讨论】：