角度でウォッチイベントを動的に登録すると(私の場合はforループで)、ウォッチが機能しません。フィドルを見てください。何か案は?
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $parse) {
// 1. binding watch inside loop (doesn't work):
$scope.aaa = 1;
$scope.bbb = 2;
$scope.dependsOn = [
function () { return $scope.aaa; },
function () { return $scope.bbb; }
];
for (var i = 0; i < $scope.dependsOn.length; i++) {
$scope.$watch(
function () {
return $scope.dependsOn[i];
},
function (newVal) {
if (newVal !== undefined) {
console.log("doesn't work");
}
}
);
}
$scope.aaa = 5;
$scope.bbb = 6;
// binding watch not inside loop (works):
$scope.ccc = 1;
$scope.ddd = 2;
$scope.dependsOn = [
function () { return $scope.ccc; },
function () { return $scope.ddd; }
];
$scope.$watch(
function () {
return $scope.dependsOn[0];
},
function (newVal) {
if (newVal !== undefined) {
console.log("works");
}
}
);
$scope.$watch(
function () {
return $scope.dependsOn[1];
},
function (newVal) {
if (newVal !== undefined) {
console.log("works");
}
}
);
$scope.ccc = 5;
$scope.ddd = 6;
}
発生している問題i
は、クロージャで変数をキャプチャしているためです。次にi
、値2にインクリメントされ、ループから外れます。各デリゲートはi
、実際にデリゲートを実行すると、値として2になります。
デモンストレーション:http://jsfiddle.net/df6L0v8f/1/(追加:)
$scope.$watch(
function () {
console.log(i);
return $scope.dependsOn[i];
},
function (newVal) {
if (newVal !== undefined) {
console.log("doesn't work");
}
}
);
自己呼び出しクロージャを使用して反復時に値をキャプチャし、デリゲートのためにそれを維持することで、これと変数の巻き上げの問題を修正できます。
http://jsfiddle.net/df6L0v8f/4/
for (var i = 0; i < $scope.dependsOn.length; i++) {
var watchDelegate = (function(itemDelegate){
return function () {
return itemDelegate;
};
})($scope.dependsOn[i]);
$scope.$watch(
watchDelegate,
function (newVal) {
if (newVal !== undefined) {
console.log(newVal());
}
}
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加