我在我的web应用程序中使用factory
。在factory
中有一个对象mapLayers
。在我的controller
中,我将此factory.mapLayers
对象分配给范围$scope.mapLayers
上的变量,并且我在它上使用ngRepeat
。
问题是factory.mapLayers
中发生的变化不会影响$scope.mapLayers
,因此DOM
不会显示新的变化。如何将$watch
或$factory.mapLayers
绑定到factory.mapLayers
?
mapService.js:
...
factory.mapLayers = [];
...
return factory;
mainController.js:
...
$scope.mapLayers = MapService.mapLayers;
...
main.html:
...
<div ng-repeat="layer in mapLayers">
...
</div>
必须在变量上注册一个监视器。把它放到控制器中:
$scope.$watchCollection(
function () {
return MapService.mapLayers;
}, function (newVal, oldVal, scope) {
// the `scope` parameter refers to the current scope
scope.mapLayers = MapService.mapLayers
}
)
$watchCollection()
的第一个参数是一个函数,它返回一个要监视的值(也可以是一个字符串,作为Angular表达式求值),第二个参数是一个回调函数,当检测到变化时调用。
值得一提的是,$watch()
可能不起作用(取决于你如何改变你的数组),因为它只会检查数组引用是否被改变——后者发生,例如,如果你将MapService.mapLayers
分配给一个新的array对象。
$watchCollection
也将监视数组内容的变化,即它将检测诸如添加或删除项之类的变化。要了解更详细的解释,您可能还想看看Ben Nadel关于两者之间差异的精彩博客文章。
您应该在控制器中$watch
服务变量。
mainController.js:
$scope.$watch(function() { return MapService.mapLayers },function() {
$scope.mapLayers = MapService.mapLayers
})