angularjs – Angular：看不在循环内工作

发布时间：2020-12-17 17:53:24 所属栏目：安全来源：网络整理

导读：如果我动态地注册监视事件(在我的情况下在for循环中),则在角度中,手表不起作用.请看一个小提琴.有任何想法吗？ var myApp = angular.module('myApp',[]);function MyCtrl($scope,$parse) { // 1. binding watch inside loop (doesn't work): $scope.aaa = 1;

如果我动态地注册监视事件(在我的情况下在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;      
}

fiddle

解决方法

您遇到的问题是因为您在闭包中捕获变量i.然后我增加到值2并退出循环,每个代理在实际执行委托时将有2作为其i值.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!