AngularJS：链接中带有监视的指令答案

【问题标题】：AngularJS : Directive with watch in linkAngularJS：链接中带有监视的指令
【发布时间】：2014-01-18 12:46:19
【问题描述】：

我正在编写一个角度指令，它有一个名为 init() 的函数，该函数需要在页面加载时运行，并且任何时候两个变量发生变化。我从这个开始：

link: function(scope, elem, attrs){
    init();
    //Refresh the view when the the type or typeId changes
    scope.$watch("[type,typeId]", function(){init(scope)}, true);
},

但我注意到 init() 实际上被调用了两次。在我取出第一个 init() 之后，它显然只会运行一次，但我只是好奇，这是预期的行为吗？

我认为 watch 函数只有在发生变化时才会执行。是因为它们在技术上正在“改变”（在链接后被初始化？）还是只是 $watch 立即执行函数的自然行为？

【问题讨论】：

标签： javascript angularjs angularjs-directive watch

【解决方案1】：

$watch 监听器在注册时被调用。如果你不想在初始化监听器时执行监听器函数内部的代码，那么你可以这样做：

scope.$watch("[type,typeId]", function(oldValue, newValue) {
    if (oldValue === newValue) return;

    // This code will only be hit when oldValue is different from newValue
    init(scope)
}, true);

【讨论】：

好的，很高兴知道。无论如何，它实际上在这种情况下有效。谢谢！

【解决方案2】：

附加到接受的答案..这甚至似乎是“官方”解决方案。

在观察者注册到作用域后，监听器 fn 被异步调用（通过 $evalAsync）来初始化观察者。在极少数情况下，这是不可取的，因为当 watchExpression 的结果没有改变时调用了侦听器。要在侦听器 fn 中检测这种情况，您可以比较 newVal 和 oldVal。如果这两个值相同 (===)，则由于初始化而调用了侦听器。

http://docs.angularjs.org/api/ng.$rootScope.Scope#methods_$watch

【讨论】：

感谢您的补充！