角度ngClass评估

时间:2015-06-10 11:20:28

标签: javascript angularjs ng-class

我一直在学习AngularJs并构建了一个非常基本的Angular应用程序。在应用的一部分中,我在

之类的div元素中使用了ngClass
<div ng-class='{"some class": aFuncTruthyOrFalsy()}'>
<!-- aFuncTruthyOrFalsy() is defined in the controller for this view-->

现在,视图中的输入元素与上述元素无关,并且与上述函数中检查的任何值完全无关。

我注意到每当我在输入字段中输入内容时(更改事件,按键事件),它都会导致重新评估ngClass。 (我已经在aFuncTruthyOrFalsy函数中放入了一个控制台日志)。我无法确定哪些事件正在冒泡而导致重新评估。

在我看来,ngClass会重新评估页面中的每一个事件。

任何人都可以解释/详细说明这种行为吗?

是否可以在视图的初始加载时缓存已评估的类?

如果在同一个视图中使用了多个ngClass,并且每个表达式求值被委托给某个函数再次执行一些多次操作来获取计算表达式,该怎么办?

3 个答案:

答案 0 :(得分:3)

Angular绑定使用$ watch来监视函数值的变化。摘要周期调用您的函数将结果与最后一个值进行比较。

这篇文章很好解释了这一点 http://tutorials.jenkov.com/angularjs/watch-digest-apply.html#watch

我建议绑定到范围变量而不是函数。即,在范围中有一个变量,用于存储该函数的结果,并在需要时更新。

毕竟你不想从你的视图中调用方法。你当前的设置会打开门,使整个MVC概念无效,例如。有人后来在该方法中添加了应该只是一个getter的功能。

答案 1 :(得分:1)

当范围发生变化时,AngularJS会通过调用$ digest()自动触发$ digest循环。当$ digest循环开始时,它会激活每个观察者。

Angular在范围模型上设置一个观察者,当模型发生变化时,它会更新视图。

因此,当您更改范围内的某些内容时,会触发所有观察者,并重新评估模型。

以下是关于该主题的好文章:Link

答案 2 :(得分:0)

您可以执行类似

的操作
 <div ng-class="{'background1': color.back}">
    <label> <span>{{emp.comp}}</span> </label>
  </div>