不使用push()时,$ scope中的AngularJS工厂属性未更新

Question

我有一个从外部源检索数据的工厂.一旦我获得数据,我就会使用第二个工厂按特定标准对其进行过滤.

工厂属性已分配给范围.

现在,当我在我的工厂中这样做时,它不会更新范围:

factory.foo = [{id:1,name:'foo'}]; // doesn't work

因此,第二工厂中的过滤器也不起作用

factory.foo = Filter.filter(); // doesn't work

虽然这有效:

factory.foo.push({id:1,name:'foo'}); // works

有没有人知道这是否有意以及为什么会这样,以及如何解决它？

全样品加上plunkr

app.factory('Foo',function(Filter) {
  var factory = {
    foo:[],
    getDataForFoo:function() {
      factory.foo = Filter.filter(); // doesn't work
      //factory.foo = [{id:1,name:'foo'},{id:1,name:'foo'}]; // doesn't work
      //factory.foo.push({id:1,name:'foo'}); // works
    }
  };
  return factory;
});

app.factory('Filter',function() {
  var factory = {
    filter:function() {
      var arr = [];
      arr.push({id:1,name:'foo'});
      return arr;
    }
  }
  return factory;
});

app.controller('MainCtrl', function($scope,Foo) {
  $scope.test = 'running';
  $scope.foo = Foo.foo;

  $scope.click = Foo.getDataForFoo;
});

Plunkr

Answer 1

问题是你的工厂更换了引用Factory.foo.初始化作用域时,$scope.foo保留对数组的引用(空).当您调用时Foo.getDataForFoo,它会在内部更改引用,Factory.foo但您的作用域仍保留对前一个数组的引用.这就是使用push工作原因,因为它不会更改数组引用,而是更改数组内容.

有几种方法可以解决这个问题.没有进入所有不同的选项,最简单的方法就是将你$scope.foo的函数包装回来Factory.foo.这样,Angular将检测摘要周期中的引用更改,并相应地更新视图.

app.controller('MainCtrl', function($scope,Foo) {
  $scope.test = 'running';
  $scope.foo = function() { return Foo.foo };

  $scope.click = Foo.getDataForFoo
});

// And in the view (the relevant part)

<ul ng-repeat="elem in foo()">
  <li>{{elem.id}} {{elem.name}}</li>
</ul>
<a href="" ng-click="click()">add</a>