ng-if vs ng-show vs ng-hide任何一个例子？

Question

我正在经历ng-if，ng-show和ng-hide，但并没有完全获得它，所有三个都做同样的事情，为什么有三个指令用于一个目的？

Answer 1

差异

ng-show和ng-if都接收条件，并在条件评估为false的情况下隐藏查看指令的元素。但是，他们用来隐藏视图的机制是不同的。

ng-show（和它的兄弟ng-hide）通过添加CSS display：none style来切换元素的外观。

另一方面，

ng-if实际上在条件为假时从DOM中删除元素，并且只有在条件变为真时才将元素添加回来。

由于ng-show使DOM中的元素保持活动状态，这意味着即使用户根本看不到视图，他们的所有监视表达式和性能成本仍然存在。如果您有一些使用ng-show切换的大视图，您可能会注意到事情有点滞后（例如点击按钮或在输入字段内输入）。

如果你只是用ng替换那个ng-show，如果你的应用程序的响应能力有所改善，因为那些额外的手表不再发生。

就是这样：用ng-show替换ng-hide和ng-if！

Answer 2

ng-if和ng-show / ng-hide之间的区别在于，如果条件导致错误，ng-if不会将html片段插入DOM，而ng-show / ng-hide将始终将html插入到DOM，但要使其可见或不可见。