如何在angularJS中$watch一个字段

How to $watch a field in a factory angularJS

本文关键字：一个 字段 watch angularJS      更新时间：2023-09-26

我在我的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 
})
相关文章：