AngularJS directive not updating:

Question

I have the following code:

index.html

<!DOCTYPE html>
<html>

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
    <script src="scripts/pandaApp.js"></script>

</head>

<body ng-app="pandaApp" ng-controller="pandaController">

<p ng-repeat="el in rainbow"><test color="{{el.color}}" ng-click="updateColor(el)"></test></p>

<li ng-repeat="el in rainbow">{{el.color}}</li>

{{dario.age}} {{dario.surname}}

</body>

</html>

pandaApp.js

var pandaApp = angular.module("pandaApp", ['ngRoute']);

pandaApp.controller('pandaController', ['$scope', function($scope) {


    $scope.rainbow = [

        {color:"red"},
        {color:"orange"},
        {color:"yellow"},
        {color:"blue"}

    ];

    $scope.updateColor = function(el) {

        el.color="changed";

    }

}]);

pandaApp.directive("test", function() {

    return {

        restrict:'E',
        template:'<i>{{color}}</i>',




        link: function(scope, el, attr){
            console.log("print attributes value: " + attr.color );

            scope.color=attr.color;

        }

    }

});

So far, I'm using ng-repeat in index.html to create a "test" element for each object contained in the rainbow list. This in turn displays the value "color". This works fine. However, I have added a further ng-click directive so that each time an element is clicked the value of its 'color' property becomes 'changed.'.

This is reflected in the list, however, not within the directive 'test'.

I'm not sure why this is though. I was under the impression that <test color="{{el.color}}" would have updated the parameter color in the directive when this was changed?

Any advice?

Dario

Lior Ben Aharon · Accepted Answer · 2015-10-02 14:52:16Z

var pandaApp = angular.module("pandaApp",[]);

pandaApp.controller('pandaController', ['$scope', function($scope) {


    $scope.rainbow = [

        {color:"red"},
        {color:"orange"},
        {color:"yellow"},
        {color:"blue"}

    ];

    $scope.updateColor = function(el) {

        el.color="changed";
        console.log("Changed")
    }

}]);

pandaApp.directive("test", function() {

    return {

        restrict:'E',
        template:'<i>{{color}}</i>',
        scope:{color:"@"},
        link: function(scope, el, attr){
            console.log("print attributes value: " + scope.color );
        }

    }

});

dfsq · Accepted Answer · 2015-10-02 14:45:51Z

1

Attribute is a string and it's not going to update. Instead you need two-way binding from the scope into directive isolated scope:

pandaApp.directive("test", function() {
    return {
        restrict:'E',
        template:'<i>{{color}}</i>',
        scope: {
            color: '='
        },
        link: function(scope, el, attr) {

        }
    }
});

Demo: http://plnkr.co/edit/ksC4XjlkP2XDpedTDuEZ?p=preview

answered Oct 2, 2015 at 14:45

dfsq

193k26 gold badges244 silver badges261 bronze badges

3 Comments

MrD Over a year ago

Thanks @dfsq, I also found that passing the whole object (<test color="{{el}}") and the changing my directive to emplate:'<i>{{el.color}}</i>', also works? (Ie: If that particular object is changed outside the directive the changes are reflected within.) Is that bad practice or am I fine to go with it?

dfsq Over a year ago

You should not do it. The only reason why it works is that because in this case directive doesn't have isolated scope so it takes data from outside, where it happens to be object el (because of ng-repeat="el in rainbow"). If you change it to say ng-repeat="element in rainbow" you would also need to change template in directive to '<i>{{element.color}}</i>'. So this is the idea of isolated scope: not to depend on outer scope changes, you just pass data into directive and it knows only about its own internals but not outside world.

dfsq Over a year ago

Check the demo here: plnkr.co/edit/oP02vuFFUhOQaVOL6AwX?p=preview. Play with it and see how it works.

Collectives™ on Stack Overflow

AngularJS directive not updating:

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related