CODEWITHSUNDEEP
javascriptangularjs
MrD
MrD

Reputation: 5084

AngularJS directive not updating:

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

Upvotes: 1

Views: 1871

Answers (2)

Lior Ben Aharon
Lior Ben Aharon

Reputation: 125

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

    }

});

Upvotes: 1

dfsq
dfsq

Reputation: 193311

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

Upvotes: 1

Related Questions