Angular JS观察指令属性

Hor*_*ven 20 javascript javascript-framework angularjs angularjs-directive

棱镜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()));
            });
        }
    };
}]);
Run Code Online (Sandbox Code Playgroud)

但观察到的值是未定义的

dnc*_*253 42

来自http://docs.angularjs.org/api/ng.$compile.directive.Attributes:

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

<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">
Run Code Online (Sandbox Code Playgroud)

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

所以,这就是你想要的:

attrs.$observe('value', function(val) {
Run Code Online (Sandbox Code Playgroud)


zs2*_*020 9

只是看value而不是dataValue.

attrs.$observe('value', function (val)  { ...
Run Code Online (Sandbox Code Playgroud)