范围拒绝更新

时间:2014-03-11 10:21:21

标签: angularjs angularjs-directive angularjs-scope

由于某些我不知道的原因,我无法获得控制器范围来更新视图, 即使apply正在运行且范围本身已更新。 我知道,因为当我在console.log(数据)时,我看到它已被更新。

userList指令应在控制器的作用域上分配data.activeUser属性。  它的工作,但视图没有相应更新

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

1 个答案:

答案 0 :(得分:2)

问题在于你包括Angular.js两次(来自Cloudflare CDN的版本1.2.1和来自Google CDN的版本1.2.14),这引起了某种冲突。删除其中一个,它将工作。

<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