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

Question

我希望有人能够提供一些我现在非常缺乏的Angular洞察。

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

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

然后.some-class将被添加/删除，如果myFunction（）评估为真或假。特别好的是，我不需要担心这个函数会在我的代码的其他地方被调用，以便表达式进行评估。 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'); 
     } 
     }); 
    } 
    } 
}