一次性绑定以及指令的双向绑定和 ng-repeat答案

【问题标题】：One-time binding along with directive's bidirectional binding and ng-repeat一次性绑定以及指令的双向绑定和 ng-repeat
【发布时间】：2015-06-16 13:13:02
【问题描述】：

假设我们有以下指令：

app.directive('foo', function() {
  return {
    restrict: 'E',
    scope: { prop: '=' },
    template: '<h1>{{prop}}</h1>'
  };
});

Angular documentation 表示可以使用一次性绑定和双向绑定，如下所示：

<foo prop="::someProperty"></foo>

而且它有效；如果 someProperty 稍后发生变化，foo 指令将不会知道它。

现在考虑这个标记：

<foo ng-repeat="item in items" prop="::item"></foo>

在这种情况下，如果 item 稍后发生更改，foo 将收到通知，就像有一个常规绑定一样。 :: 似乎没有任何实际效果（它确实阻止了创建额外的手表，我检查了自己）。我创建了 this plunker 来说明这两种情况。

我的问题是：这种行为正确吗？我希望它在两种情况下都保持一致。

【问题讨论】：

标签： javascript angularjs angular-directive

【解决方案1】：

我相信您的问题的答案是肯定的，这是正确的行为。当items 中的item 发生更改时，会创建模板的新实例，而旧的实例会被简单地删除。在您的情况下，创建了一个新的 foo 元素，因此，prop 属性值也是新的。这是来自 Angular ngRepeat 文档：

当集合的内容发生变化时，ngRepeat 会对 DOM 进行相应的更改：

添加项目时，模板的新实例会添加到 DOM。

当一个项目被移除时，它的模板实例也会从 DOM 中移除。

重新排序项目时，它们各自的模板在 DOM 中重新排序。

它没有明确说明更新时会发生什么。但是，我相信新的取代旧的而不是更新。

【讨论】：

你死定了，先生。我刚刚通过使用little snippet 确认了这一点。 ngRepeat 删除当前元素并在项目本身更新时添加一个新元素。