ngClass 何时评估函数/如何在自定义指令中模仿这一点答案

【问题标题】：When does ngClass evaluate functions / How to mimic this in custom directivengClass 何时评估函数/如何在自定义指令中模仿这一点
【发布时间】：2014-10-10 19:25:17
【问题描述】：

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

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

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

如果 myFunction() 评估为真或假，则将添加/删除 .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() 的变化呢？

【问题讨论】：

你为什么不使用ng-if with statement = myFunction()
我觉得我不太明白你在说什么，你能详细说明一下吗？
@Sanborn 你能解决这个问题吗？

标签： javascript angularjs angularjs-directive ng-class

【解决方案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”值上有结束引号。

【讨论】：