8

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

工厂属性分配给范围。

现在，当我在工厂执行此操作时，它不会更新范围：

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

4

2 回答 2

12

问题是您的工厂替换了对Factory.foo. 当你的作用域被初始化时，$scope.foo持有一个对数组的引用（空）。当您调用 时Foo.getDataForFoo，它会在内部更改对 的引用，Factory.foo但您的作用域仍保留对前一个数组的引用。这就是 usingpush起作用的原因，因为它不会更改数组引用，而是更改数组内容。

有几种方法可以解决这个问题。无需进入所有不同的选项，最简单的方法是将您包装$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>
于 2013-09-02T09:22:21.163 回答
1

@Simon-Belanger 的回答是正确的，他提出了一个可行的解决方案。

另一种选择是清空数组并将新项目推入其中（例如，用于刷新事件），而不是通过为其分配新数组来重置引用。您可以通过分配长度来截断数组：myArray.length = 0然后您可以遍历新集合以通过以下方式填充新条目array.push()

于 2014-11-23T21:49:37.520 回答