web-dev-qa-db-fra.com

Angular JS observe sur l'attribut de directive

Comment js angulaire peut-il surveiller les attributs sur les directives personnalisées afin d'accepter les valeurs angulaires à lier 

Voici ce que j'ai jusqu'à présent:

<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()));
            });
        }
    };
}]);

mais la valeur observée revient comme indéfinie

angularjsangularjs-directivejavascriptjavascript-framework
20
Horace Heaven

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

tous sont traités comme équivalents en angulaire: 

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

Donc, l'attribut data-value normalise à value

Donc, voici ce que vous voulez:

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

Il suffit de regarder la value au lieu de dataValue.

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

Vous pouvez également utiliser un new attribute pour votre directive au lieu de data-value:

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

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