ngIf和ngSwitch AngularJS

ngIfngSwitch什么实际区别? 这两个指令都操纵DOM,但ngSwitch更加冗长。 ngIf是典型的情况下,除非你需要什么大的东西,在这种情况下使用ngSwitch

ngSwitchngIf是不是直接replace的情况? 或者是他们唯一的实际区别的语法?

我认为,布兰登·蒂利(Brandon Tilley)的说法是正确的,尤其是在指出与ngShow / ngHide的对比中。 还有一个额外的差异要注意: ng-If将分离并重新附加一个元素到位 。 但是ng-Switch有一个外部的包含元素,你可以在其中声明主指令及其条件: ng-switch="expression" 。 该外部元素中的条件内容将作为外部元素的最后一个子元素append() ,从而相对于外部元素中的任何非条件内容更改其位置。

而且,看到这个CodePen的三个交互式演示,显示执行的差异。


编辑:这种行为在Angular 1.2中改变。 元素现在留在原地。 上面的Codepen提到并说明了这一点,提供了一个1.08 Plunk的链接,已经被消除了…

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

还有一个区别是ngIf和ngSwitch会创build新的作用域,而ngShow / ngHide则不会。

你可以用ngIf / ngSwitch来思考,就像你在编码时用if / switch一样。 很明显,他们做的事情几乎是一样的,但有些情况下ngIf更好,有些情况下nfSwitch更好。