javascript - 无法访问 $watch 内的范围变量

Question

我正在用 angularJS 开发一个过滤器。一切正常，但只有一个地方我无法访问范围对象，但是当我更改代码时它工作正常但我想知道问题出在哪里。我认为我对范围和指令的理解是错误的。

在一个指令中，我正在访问一个数组，在 scope.watch 函数中，我尝试访问该数组，但它不起作用

工作代码

var currentScope=scope.mainList[scope.$index].list;
//this will hit whenever any of the scope variable changes
scope.$watch(function () {
  var hasTrue, hasFalse;
  angular.forEach(currentScope, function (v) {
    if (v["isSelected"]) {
      hasTrue = true;
    } else {
      hasFalse = true;
    }
  });
  if (hasTrue && hasFalse) {
    iElement.attr('checked', false);
   // iElement.addClass('greyed');
  } else {
    iElement.attr('checked', hasTrue);
   // iElement.removeClass('greyed');
  }
}, true);

这是行不通的

var currentScope=scope.mainList[scope.$index].list;
 //this will hit only when this corresponding scope variable changes
scope.$watch(currentScope,function (newVal) {
  var hasTrue, hasFalse;
  angular.forEach(newVal, function (v) {
    if (v["isSelected"]) {
      hasTrue = true;
    } else {
      hasFalse = true;
    }
  });
  if (hasTrue && hasFalse) {
    iElement.attr('checked', false);
   // iElement.addClass('greyed');
  } else {
    iElement.attr('checked', hasTrue);
   // iElement.removeClass('greyed');
  }
}, true);

我需要这第二个代码，但每当我更改任何它没有命中的变量时，它就会出现未定义

请检查下面的链接，它会给你更多的想法......

Code

Answer 1

扩展@tobi 的评论，这是编写 watch 功能的推荐方式:

var currentScope=scope.mainList[scope.$index].list;
scope.$watch(function () { return currentScope; }, function (newVal) {
  var hasTrue = false, hasFalse = false;
  angular.forEach(newVal, function (v) {
    if (v["isSelected"]) {
      hasTrue = true;
    } else {
      hasFalse = true;
    }
  });
  if (hasTrue && hasFalse) {
    iElement.attr('checked', false);
   // iElement.addClass('greyed');
  } else {
    iElement.attr('checked', hasTrue);
   // iElement.removeClass('greyed');
  }
});

或者，您可以这样做:

scope.currentScope=scope.mainList[scope.$index].list;
scope.$watch('currentScope', function (newVal) {
  var hasTrue = false, hasFalse = false;
  angular.forEach(newVal, function (v) {
    if (v["isSelected"]) {
      hasTrue = true;
    } else {
      hasFalse = true;
    }
  });
  if (hasTrue && hasFalse) {
    iElement.attr('checked', false);
   // iElement.addClass('greyed');
  } else {
    iElement.attr('checked', hasTrue);
   // iElement.removeClass('greyed');
  }
});