Angular JS observe on directive attribute

Question

How can angular js watch attributes on custom directive in order to accept angular values to be bind

Here is what I have so far:

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

but the observed value is coming back as undefined

Nebulosar · Accepted Answer · 2020-09-04 09:43:56Z

42

From https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes:

all of these are treated as equivalent in Angular:

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

So the attribute data-value normalizes to value

So, this is what you want:

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

edited Sep 4, 2020 at 9:43

Nebulosar

1,8973 gold badges23 silver badges49 bronze badges

answered Sep 11, 2013 at 18:55

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zs2020 · Accepted Answer · 2013-09-11 18:54:52Z

9

Just watch the value instead of dataValue.

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

answered Sep 11, 2013 at 18:54

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Comments

Nammen8 · Accepted Answer · 2017-02-22 10:05:51Z

0

You can also use a new attribute for your directive instead of data-value:

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

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

answered Feb 22, 2017 at 10:05

Nammen8

6291 gold badge11 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular JS observe on directive attribute

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related