javascript - 将 ng-repeat 与指令一起使用会导致 watch 出现缺陷

Question

我制定了一个新指令，它基本上是一个新的轮播，它扩展了 Angular UI 轮播 Bootstrap 。这个新的轮播将在一帧中显示多个 div。我的新指令接受数组中的任何数据和每个数据的自定义 html 模板。

但是，如果我将轮播与指令一起使用，我会在指令中看到 watch 的奇怪行为。一切正常，但我的指令中的 watch 始终为 newVal 和 oldVal 获取相同的值。我的意思是，这是我的轮播代码:

<slide ng-repeat="frame in ctrl.frames">
     <div ng-repeat="divs in frame.divs">
       <custom-directive data="divs"></custom-directive>
     </div>
</slide>

在我的 customDirective Controller 中，我观察这样的数据变化:

$scope.$watch("ctrl.data", function(newVal, oldVal){
     if (newVal !== oldVal) {
         // data is updated, redraw the directive in my case
         // however newVal is always the same as oldVal
     }
})

newVal 和 oldVal 始终相同。我希望初始状态为 oldVal = undefined 并且 newVal 将是我的新数据。然而，事实并非如此。数据作为双向绑定(bind)传递给传送带和自定义指令(在每个指令的范围内使用“=”运算符)。

为什么会这样？我对此进行了长期调查，以下是我的发现:

1. 如果我不在我的旋转木马中使用 ng-repeat，这个会起作用。 oldVal 将是 undefined 而 newVal 将是我在初始状态期间的数据。但是为什么 ng-repeat 会导致这个呢？我读过很多关于原型(prototype)继承的黄金法则的文章，其中说ng-repeat 将创建隐藏/隐藏父级的新 childScope，但这只发生在 原始对象，我正在将一个数组传递给我的数据。

我需要在我的旋转木马指令中使用 ng-repeat。所以我需要知道为什么 ng-repeat 会导致这个。有什么建议吗？

更新:在 Plunkr 中重现问题 here .如您所见，oldValue 始终与 newValue 相同(我预计 oldValue 一开始是未定义的)

Answer 1

当你在 link 函数中注册 $watch 时，Angular 已经在 preLink 阶段处理了绑定(bind)，因此你永远不会看到 undefined 你的 watcher 第一次被执行时(初始化调用是 oldVal 和 newVal 可能相同的唯一时刻。如果 watcher 在 绑定(bind)解析之前注册, oldValue 将是 undefined)

如果您真的想看到它，您可以覆盖编译阶段并添加自定义preLink方法(默认 link 是 postLink)。

但我真的怀疑你是否想这样做。为什么第一次没有 undefined 是个问题？您应该尝试解释您面临的真正问题。

此外，请注意，如果传递给指令的 divs 是数组，则应使用 scope.$watchColleciton 而不是 scope.$watch 为了检测数组元素的变化而不是整个数组指针的变化。