1

モデルでアクションをトリガーするために 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'
    };
});

Hereitem1は配列に 2 回出現するitemsため、2 つのコントローラーが同じデータを監視することになります。triggersプロパティへの変更がサーバーに保存された場合catches、item1 への各変更を 2 回保存することになります。アイテムが 3 回出現すると、3 回保存されます。

変更リスナーはモデルに入れるべきだと思いますが、モデルはスコープにアクセスできません。各項目を反復処理して AppCtrl に動作を追加することは、私にはあまり意味がありません。では、ウォッチャーはどこへ行くのでしょうか?

また、これをフィドルに入れました:http://jsfiddle.net/nicholasstephan/p56MT/3/

ありがとう

4

1 に答える 1