javascript - ngClass 什么时候评估函数/如何在自定义指令中模仿它

Question

我希望有人能提供一些我现在非常缺乏的 Angular 见解。

ngClass 允许您根据某些功能添加/删除类。例如，如果我写:

<div ng-class="{'some-class' : myFunction()}"> </div>

如果 myFunction() 的计算结果为 truthy 或 falsey，则 .some-class 将被添加/删除。特别好的是，我无需担心此函数会在我的代码中的其他任何地方被调用以计算表达式。 ngClass 只负责使类与 myFunction() 的当前返回值保持同步。

所以我的第一个问题是 ngClass 如何确定何时检查 myFunction() 的返回值是否已更改？它会在每个摘要循环中检查 myFunction() 吗？大概有什么东西上面放了 watch ，但是正在监视什么？我尝试阅读 ngClass 的代码，但我没有足够的背景知识来了解它的实现方式。

我想知道这一点的原因是我想在自定义指令中模仿这种行为。所以在我的应用程序中，我有类似上面的 ngClass 的东西。 myFunction() 位于我页面的主 Controller 上，但它进行了一系列直接的 DOM 操作，所以它不应该在那里。我想从 Controller 中取出 myFunction() 并将其移动到自定义指令中，但如果我这样做，那么我需要一些方法来反复检查此函数以设置类。我希望能够做这样的事情:

app.directive('myDirective', function () {
  return {
    restrict: 'A,
    link: function (scope, elem, attrs) {
      function myFunction() {//...}

      // I want this to be checked at the
      // same frequency that ngClass is checked
      // Is that each digest cycle?

      if (myFunction()) {
        elem.addClass('some-class');
      } else {
        elem.removeClass('some-class');
      }
    }
  }

显然这是行不通的。它只会在指令链接时运行。那么我该如何观察 myFunction() 的变化呢？

Answer 1

我会使用 .$watch()，它在每个 $digest 循环期间评估初始参数，并在初始加载期间调用一次监听器(第二个参数)，随后每次评估初始参数的返回值与前一个不同。

参见 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch .

基于您提供的伪代码(实际代码对于测试目的会更好 :-) 以下是您应该执行的操作的示例:

app.directive('myDirective', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      scope.$watch(function() {
         // .. this is your "myFunction()"
         return result;
      }, function(newResult) {
        if (newResult) {
          elem.addClass('some-class');
        } else {
          elem.removeClass('some-class');
        }
      });
    }
  }
}  

另外，请确保您有“A”值的收盘价。