ngClass何时评估函数/如何在自定义指令中模仿

Question

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

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

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

如果myFunction（）评估为true或false，则将添加/删除.some-class。 特别好的是，我不必担心此函数在代码中的其他位置被调用以求表达式进行计算。 ngClass只是负责保持类与myFunction（）的当前返回值保持最新。

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

我想知道的原因是我想在自定义指令中模仿此行为。 所以在我的应用程序中，我有类似上面的ngClass的内容。 myFunction（）位于页面的主控制器上，但是它会进行大量直接的DOM操作，因此不应存在。 我想将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”值上加上了结束语。