AngularJS $watch 莫名其妙地改变观察值的值

Question

我正在尝试实现ng-show 和ng-hide 的动画版本；我最初尝试使用jQueryUI.toggle('slide', …)，但由于$watch 多次触发，我的元素会切换，然后立即切换（有时不止一次）。但我在 AngularJS 的 github 问题中看到这是 $watch 的预期行为（脏检查）。

所以我想，好吧，这个小效果——你该死，我会明确地显示或隐藏而不是简单的切换：我分解它来检查 $watch 的 newValue 的值，如下所示：

scope.$watch(condition, function myShowHideAction(newValue,oldValue) {
    if ( newValue !== oldValue ) {
        if (newValue) {
            elm.show("slide", { direction: direction }, "slow");
        } else {
            elm.hide("slide", { direction: direction }, "slow");
        }
    }
}

启动它，我看到了什么？切换！

在输入一些控制台日志后，我发现我的条件值在 $watch 循环期间以某种方式发生了变化（它迭代了 6 次而不是仅仅一次，但这不应该在这里也不应该在那里）。但是，实际范围参数的值不会像newValue 那样在中途改变（因为它不应该改变）。

这到底是怎么回事？

Plunker

Answer 1

发生这种情况的原因是您的所有信息框共享相同的范围。如果您在 mySlide 指令链接函数中添加 console.log(scope) 语句，您会看到它在相同范围内创建了多次。因此，您在同一范围内针对同一条件有多个手表。

恐怕您的代码不是最容易遵循的，但问题似乎在第 87 行的 my-map.js 中。您可能应该使用 $compile(elm.contents())(scope.$new()); 来创建，而不是使用 $compile(elm.contents())(scope);该信息框的隔离范围。