angularjs - que - Angular JS observar en atributo directivo

ng-cloak not working

Question

¿Cómo pueden los atributos de la vista angular js en la directiva personalizada para aceptar los valores angulares a ser vinculados

Aquí está lo que tengo hasta ahora:

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

pero el valor observado está volviendo como indefinido

Answer 1

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

Todos estos son tratados como equivalentes en Angular:

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

Entonces el atributo data-value normaliza a value

Entonces, esto es lo que quieres:

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

Answer 2

Solo observa el value lugar de dataValue .

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

Answer 3

También puede usar un new attribute para su directiva en lugar de data-value de data-value :

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

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