ngIf 和 ngSwitch AngularJS答案

【问题标题】：ngIf and ngSwitch AngularJSngIf 和 ngSwitch AngularJS
【发布时间】：2013-05-24 19:03:35
【问题描述】：

ngIf 和 ngSwitch 之间的实际区别是什么？这两个指令都操作 DOM，但 ngSwitch 更冗长。典型情况是只使用ngIf，除非你需要非常大的东西，在这种情况下使用ngSwitch？

是否存在ngSwitch 和ngIf 不是直接替换的情况？还是它们的唯一实际区别是语法？

【问题讨论】：

【解决方案1】：

ngIf 基本上是 ngSwitch 的一个版本，只有一个条件。它与ngShow 的不同之处在于它删除了实际的DOM 元素，而不是简单地隐藏它。如果您使用的 ngSwitch 只是一个真实的条件检查，那么我相信 ngIf 会做同样的事情。

【讨论】：

【解决方案2】：

Michele Tilley's got it exactly right，我相信，特别是指出与ngShow/ngHide 的对比。还有一个需要注意的额外区别：ng-If 将分离并重新附加元素就地。但是ng-Switch 有一个外部包含元素，您可以在该元素上声明主指令及其条件：ng-switch="expression"。该外部元素内的条件内容将被append()-ed 作为外部元素的最后一个子元素，从而改变其相对于外部元素内任何非条件内容的位置。

并且，请参阅this CodePen 了解所有三个的交互式演示，展示执行的差异。

编辑：这种行为在 Angular 1.2 中发生了变化。元素现在保留在原处。上面的 Codepen 提到并演示了这一点，提供了一个 1.08 Plunk 的链接，该 Plunk 不幸被消灭了......

【讨论】：

【解决方案3】：

另一个区别是 ngIf 和 ngSwitch 创建新范围，而 ngShow/ngHide 不会。

【讨论】：

这是一个有用的评论，但绝不回答实际问题。

【解决方案4】：

您可以在 ngIf/ngSwitch 中进行思考，就像在编码时使用 if/switch 一样。显然它们做的事情几乎相同，但有些情况下 ngIf 更好，有些情况下 nfSwitch 更好。

【讨论】：

例如，ngSwitch 更好，如果您有几个案例和基本上是!= any of the above的默认案例@