有条件地应用 Angular 中的一次性绑定答案

【问题标题】：Conditionally apply one-time binding in angular有条件地应用 Angular 中的一次性绑定
【发布时间】：2016-11-09 10:48:30
【问题描述】：

我遇到了这样一种情况，我的列表中有很多项目，其中一些处于最终状态并且不会改变，而另一些将会改变。我在想，有没有办法有条件地使用 Angular 的一次性绑定（'::'）？就像我有一个最终标志为真 - 使用一次绑定，否则 - 常规绑定。

我是否必须使用 ng-if 复制整个 DOM 结构，并使用一次性绑定和常规绑定？

【问题讨论】：

目前不支持有条件的一次性绑定，除非您在谈论数千个项目，否则尝试通过ng-if 和重复代码强制它是否会获得任何性能优势值得怀疑，到那时，为什么你首先要在 UI 中有这么多项目？
@Claies，我有一个聊天窗口，虽然同时有不到数千条消息，但这些消息有相当多的数据相关字段，如发件人、文本、到达时间等.最新发送的消息正在等待服务器确认它已交付。虽然所有其他消息都可以保持不变，但此消息需要在确认事件时更改。
@Claies 此外，您应该始终尝试将手表数量保持在最低限度，而此组件可能有合理数量的手表 - 包含它的页面的其余部分可能有很多观察者或其他征税部分。只是想节俭。
虽然我同意避免 excess 观察者绝对是一种可靠的做法，但这不是这样做的方法。您只是在ng-if 上用不同的手表替换表达式上的手表，这会使您的收益边缘化。除非每个 ng-if 同时覆盖许多其他观察者，否则重复 UI 元素的额外调试工作是不值得的。
@Claies “除非每个 ng-if 同时覆盖许多其他观察者” - 是的，这就是我要说的。被 ng-if 覆盖的 div 内部有一个包含多个 watch 的大结构。

【解决方案1】：

最模块化的方式是声明自定义指令，从以下位置重新编译 DOM 元素：

<div is-final='true' ng-model='myvar'></div>

<div is-final='false' ng-model='myvar'></div>

到：

<div>{{::myvar}}</div>

<div>{{myvar}}</div>

将 if 子句包装到指令中。这样您就不必复制许多 LOC。该指令只需要require ngModel、template、replace: true 和link。你也可以避免在link中使用模板和$compile。

【讨论】：