表达式的 Angular 惰性一次性绑定

Posted 2023-02-23

【中文标题】表达式的 Angular 惰性一次性绑定

【英文标题】：Angular lazy one-time binding for expressions

【发布时间】：2014-07-21 02:50:30

【问题描述】：

AngularJS 从 1.3.0-beta.10 版本开始有了一个新特性："lazy one-time binding"。

简单的表达式可以以::为前缀，告诉angular在表达式第一次被评估后停止观察。给出的常见示例如下：

<div>::user.name</div>

以下表达式是否有类似的语法？

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="classNameFoo: user.isSomething"></div>

【问题讨论】：

详细解释请参考 Angular 文档：docs.angularjs.org/guide/expression#one-time-binding

【参考方案1】：

是的。您可以为每个表达式加上 :: 前缀，即使是 ngIf 或 ngClass 中的表达式：

<div ng-if="::(user.isSomething && user.isSomethingElse)"></div>
<div ng-class="::classNameFoo: user.isSomething"></div>

实际上，the code 只是检查表达式中的前两个字符是 : 以激活一次性绑定（然后删除它们，因此甚至不需要括号）。其他一切都保持不变。

【讨论】：

它回答了我的问题，尽管一些新功能不能很好地工作：<div ng-if="::user.isSomething"></div> 和 <div ng-if="::(!user.isSomething)"></div> 都渲染。它可以在没有“::”的情况下工作。

@seldary 我无法重现该问题。正如我在编辑中解释的那样，每个以 :: 为前缀的表达式都对我很有效。如果有疑问，你能做一个小提琴吗？

起初它似乎对我也不起作用，因为 ngClass 定义了多个类。我很快发现绑定仍然是绑定的，因为在 ngClass 中使用的一些监视变量尚未定义（我们知道 angular 会在释放监视程序之前等待首先定义值）。这是一个小小提琴来演示这种行为jsfiddle.net/2LkyLoop。

@MaxRocket bindonce 语法已在 Angular 1.3 中添加。所以它不会在 1.2 或更低版本中工作

ng-if 的一次性绑定似乎不起作用。无论有没有::，观察者数量都非常高。它适用于 ng-class，但 ng-if 似乎不服从我的一次性绑定（1.5.6）。请注意，我正在尝试单向绑定来自 ng-repeat 的对象属性。不确定这是否会有所不同。