我有一个从外部源检索数据的工厂.一旦我得到数据,我就会使用第二家工厂按照一定的标准对其进行过滤.
工厂属性已分配给范围.
现在,当我在我的工厂中这样做时,它不会更新范围：
factory.foo = [{id:1,name:'foo'}]; // doesn't work
因此,第二工厂中的过滤器也不起作用
factory.foo = Filter.filter(); // doesn't work
这有效：
factory.foo.push({id:1,name:'foo'}); // works
有没有人知道这是否有意,为什么会这样,以及如何解决？
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;
});
问题是您的工厂替换了对Factory.foo的引用.初始化范围时,$scope.foo保存对数组的引用(空).当您调用Foo.getDataForFoo时,它会在内部更改对Factory.foo的引用,但您的范围仍保留对前一个数组的引用.这就是使用push的原因,因为它不会更改数组引用,而是更改数组内容.
原文链接：https://www.f2er.com/angularjs/142316.html有几种方法可以解决这个问题.没有进入所有不同的选项,最简单的方法是将$scope.foo包装在一个函数中,返回Factory.foo.这样,Angular将检测摘要周期中的引用更改,并相应地更新视图.
app.controller('MainCtrl',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>
