CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Asaf Katz
Asaf Katz

Reputation: 4688

Scope refuses to update

for some reason unknown to me, I can't get the controller scope to update the view, even though apply is running and the scope itself has been updated. I know that because when I console.log(data) I see its been updated.

userList directive should assign data.activeUser property on controller's scope. its working, but the view is not updating accordingly

Link to the demo: http://jsbin.com/mojemiki/6/edit

var app = angular.module('app', []);

app.controller('myCtrl', function ($scope) {

  $scope.data = {
    users : [{
      name : 'bob' 
    },{
      name : 'koko' 
    }],
    activeUser : {}
  };

  $scope.selectUser = function (user) {

    // console is showing user data
    console.log(user);

    $scope.data.activeUser = user;

    console.log($scope.data.activeUser);
    // data.activeUser has been updated, but the view is not. why is that?

    // $scope.$apply() - is not helping 
    // because its aleady running
  };
});


app.directive('userList', function () {
  return {
    scope : {
      users : '=',
      onSelect : '&'
    },
    template : '<h3>in directive scope</h3>' +
    '<button ng-repeat="u in users" ng-click="onSelect({ user : u })">Set Active User: {{u.name}}</button>' + 
    '<br/><code>{{users}}</code>'
  };
});

Upvotes: 2

Views: 46

Answers (1)

Bertrand
Bertrand

Reputation: 13570

The problem is that you are including Angular.js twice (version 1.2.1 from Cloudflare CDN and version 1.2.14 from Google CDN) and this is causing some kind of conflict. Remove one of them and it will work.

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>

Here is your fiddle.

Upvotes: 2

Related Questions