我应该把 AngularJS 范围 $watchers 放在哪里？答案

【问题标题】：Where should I put AngularJS scope $watchers?我应该把 AngularJS 范围 $watchers 放在哪里？
【发布时间】：2013-04-17 06:31:43
【问题描述】：

我正在尝试更改 AngularJS 范围以触发模型中的操作。为此，我在我的项目控制器中使用$scope.$watch()，并将这些控制器插入指令中。我遇到的问题是，当一个项目在页面上出现多次时，我会为同一条数据获得多个观察者。

例如：

angular.module("MyApp", [])
.factory('ItemsModel', function() {
    var item1 = { triggers: 0, catches: 0 };
    var item2 = { triggers: 0, catches: 0 };

    return {
        getItems: function() { 
            return [item1, item2, item1];
        }
    };
})
.controller('AppCtrl', function($scope, ItemsModel) {
    $scope.items = ItemsModel.getItems();    
})
.controller('ItemCtrl', function($scope) {
    $scope.trigger = function() {
        $scope.item.triggers++;
    };    
    $scope.$watch('item.triggers', function(newValue, oldValue) {
        if(newValue != oldValue)
            $scope.item.catches++;
    });
})
.directive('item', function() {
    return {
        scope: {
            item: "="
        },
        controller: 'ItemCtrl'
    };
});

这里item1 在items 数组中出现了两次，所以我最终得到了两个控制器查看同一条数据。如果triggers 是对属性的更改，而catches 是保存回服务器，那么我会将每个更改保存到 item1 两次。如果一个项目出现 3 次，它会节省 3 次。

我觉得更改监听器应该放在模型中，但模型没有任何访问范围的权限。迭代每个项目并在 AppCtrl 中添加行为对我来说没有多大意义。那么观察者去哪儿了呢？

我也把它放在了这里：http://jsfiddle.net/nicholasstephan/p56MT/3/

谢谢

【问题讨论】：

该指令应该用于可重用组件。它不是控制器的包装器。指令的控制器参数和 ng-controller 是两个不同的东西。它们不是一回事。
@ganarj 好的。如果我取出空指令，只使用 ng-controller，控制器仍会为同一条数据调用两次。 jsfiddle.net/vFtbL/1 问题是，$scope.$watch('item.triggers'... 应该去哪里？
您能解释一下您要解决的真实世界场景吗？这太抽象了。
真的。例如，这篇文章是一个具有属性的对象：主题、正文、cmets、标签等。我想观察标签数组的变化，并在添加或删除标签时触发保存到服务器。

标签： angularjs angularjs-scope

【解决方案1】：

我没有像你在这里那样使用指令中指定的控制器，但另一种方法是在 item 的指令中设置一个监视。这样，手表只会因指令中的项目更改而跳闸一次。

【讨论】：