javascript - 如何在工厂angularJS中监视字段

我在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分配给新数组，则会发生后者。宾语。

另一方面，$watchCollection还将监视数组内容的更改，即它将检测到添加或删除项之类的更改。有关更详细的说明，您可能还希望了解Ben Nadel关于两者之间差异的出色著作blog post。