AngularJS：两个 ng-if 还是一个插值？答案

【问题标题】：AngularJS: two ng-if or one interpolation?AngularJS：两个 ng-if 还是一个插值？
【发布时间】：2017-02-05 01:52:27
【问题描述】：

应根据条件显示文本。一种方案，两种实现方式。

第一种方式：

<p ng-if="theType == 'type21'">Alert! Special type...</p>
<p ng-if="theType != 'type21'">Chill...</p>

第二种方式：

<p>{{theType == 'type21' ? 'Alert! Special type...' : 'Chill...'}}</p>

哪个更好？每种方式的优缺点？

【问题讨论】：

【解决方案1】：

我认为ng-if - 正如文档解释的那样：

ngIf 指令根据 {expression} 删除或重新创建 DOM 树的一部分。如果分配给 ngIf 的表达式的计算结果为 false 值，则从 DOM 中删除该元素，否则将该元素的克隆重新插入 DOM。

第二个只检查一次条件，但我认为DOM效率更重要。

【讨论】：

【解决方案2】：

对于像这样的简单情况，这只是一个偏好问题。

对于简单的表达，我会选择第二个。这只是一个简单的表达方式，不会表现出任何性能差异。如果您不希望 theType 发生变化，您可以使用 bindOnce 语法来防止进一步评估 - 提高性能

{{::(theType == 'type21' ? 'Alert! Special type...' : 'Chill...')}}

看到fiddle，你可以玩去掉::

对于更复杂的情况，我宁愿将插值移至控制器并仅使用{{textToShow}}，我将留下ng-if 用于可以删除的指令，或者如果必须更改DOM 结构（这里您只需更改@ 内的文本987654328@，你没有添加新的 DOM 元素）

【讨论】：