如何 $watch 工厂里的田地 angularJS

Question

我在我的网络应用程序中使用 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>

Answer 1

您应该 $watch 控制器中的服务变量。

mainController.js:

$scope.$watch(function() { return MapService.mapLayers },function() {
    $scope.mapLayers = MapService.mapLayers 
})

Answer 2

您必须在变量上注册观察者。将其放入您的控制器中：

$scope.$watchCollection(
    function () {
        return MapService.mapLayers;
    }, function (newVal, oldVal, scope) {
        // the `scope` parameter refers to the current scope
        scope.mapLayers = MapService.mapLayers 
    }
)

$watchCollection() 的第一个参数是一个函数，它 returns 一个要观察的值（也可以是一个被评估为 Angular 表达式的字符串），第二个是检测到更改时调用的回调。

值得一提的是 $watch() 可能不起作用（取决于您更改数组的方式），因为它只会检查数组引用是否已更改 - 后者会发生，例如，如果您分配MapService.mapLayers 到一个新的 Array 对象。

另一方面，

$watchCollection 也会观察数组 contents 的变化，即它会检测添加或删除项目等变化。如需更详细的解释，您可能还想看看 Ben Nadel 关于两者之间差异的精彩文章blog post。

如何 $watch 工厂里的田地 angularJS

How to $watch a field in a factory angularJS

html

javascript

angularjs

ng-bind