Angular：注意不在循环内工作(Angular: watch not working inside loop)

Angular：注意不在循环内工作(Angular: watch not working inside loop)

在角度上，如果我动态地注册观看事件（在我的情况下在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; }

小提琴

In angular if I register watch events dynamically (in my case in a for loop), the watch does not work. Please take a look at a fiddle. Any ideas?

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; }

fiddle

最满意答案

您遇到的问题是因为您正在关闭中捕获变量i 。 然后i增加到值2并退出循环，你的每个委托将有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()); } } ); }

The problem you are experiencing is because you are capturing the variable i in a closure. Then i gets incremented to the value 2 and drops out of the loop, each of your delegates will have 2 as their i value upon actually executing the delegate.

Demonstrates: http://jsfiddle.net/df6L0v8f/1/ (Adds:)

$scope.$watch( function () { console.log(i); return $scope.dependsOn[i]; }, function (newVal) { if (newVal !== undefined) { console.log("doesn't work"); } } );

You can fix this and the issue of variable hoisting by using a self calling closure to capture the value at the time of iteration and maintain that for your delegate.

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()); } } ); }