モデルでアクションをトリガーするために 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/
ありがとう