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

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

有谁知道这是否是有意的，为什么会这样，以及如何解决？

Full Sample plus 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 将检测摘要循环中的引用更改，并相应地更新 View 。

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>