Javascript 在Angular$interval中更新变量会导致其他函数运行

我已经尽可能地简化了这个问题，所以忽略这个例子是多么毫无意义：）

我有一个显示计时器的指令。每500毫秒，计数器递增一次

JS

HTML

HTML

{{getNumber（number）}
{{counter}}

我已经尝试在$interval中使用，但是在DOM中计数器没有更新。如何防止指令在控制器中反复运行其他函数，但仍让它更新视图中的计数器

下面是一个JS提琴，显示了这个问题（查看控制台日志）

---

这是预期的行为

角度运行，用于检测和传播更改。更新

{{getNumber（number）}}

返回值的唯一方法是计算函数调用

getNumber（number）

，因为Angular不知道是否更改了其返回值。摘要循环被调用，它是围绕标准JavaScript

setInterval（）

的包装器

您可以将代码修改为只使用

setInterval（）

，您可以看到不再调用

getNumber（）

，因为没有任何东西可以触发摘要循环

您的最新演示：

---

回答您的问题：不要从函数返回数值。我不知道您的用例是什么，但我认为您不需要在

{{}

中使用函数调用。它还可能导致严重的性能问题，通常最好避免它。

我想我已经找到了解决这一特定情况的方法

我将元素传递给指令的link函数

link: function(scope, el, attrs) {

然后，我可以手动更新它，而不是绑定计数器的值

angular.element(el[0]).html(counter++);

最后，我通过传递false作为第四个参数，告诉我的$interval不要调用eapply

count = $interval(tick, 500, 0, false);

---

链接到fixed JSFIDLE

在我的实际用例中，计时器在每一页上。有很多页面，它们都做各种各样的事情。从ng repeat中的函数返回一个数字只是演示问题的一种简单方法。我希望我能做点什么，告诉指令不要关心任何东西，除了它本身，这样它就不会触发其他所有东西的消化。

<div ng-controller="testController">
<div ng-repeat="number in array">
    {{getNumber(number)}}
</div>


<test-timer>{{counter}}</test-timer>

link: function(scope, el, attrs) {

angular.element(el[0]).html(counter++);

count = $interval(tick, 500, 0, false);