ng-show ng-hide ng-if的区别

用途

• ng-show ng-hide ng-if三个都可以用来控制页面DOM元素的显示与隐藏。
• ng-hide条件为true时，隐藏所在元素，false时显示所在元素。
• ng-show相反，条件为true时，显示所在元素，false时隐藏所在元素。
• ng-if 根据表达式的值动态的在当前页面中添加删除页面元素，如果表达式的值为flase，那么这个元素就会从页面中删除，否则会添加一个元素。

工作原理

• 在实现原理方面：ng-show和ng-hide是通过修改css样式的方式控制元素的显示与隐藏，对应的DOM元素会一直存在于当前页面中，而ng-if根据表达式的值动态的添加或者删除元素。ng-if创建元素时，用的是它编译后的代码，如果ng-if内部的代码被其他方式修改过，那么修改只会对本次展现有效，页面重新渲染后修改的效果就会消失，而ng-show和ng-hide则能够保留在DOM元素上次修改后的状态。

在作用域方面

当一个元素，被ng-if从DOM中删除时，与其关联的作用域也会被销毁，当他重新加入DOM中时，会生成一个新的作用域，而ng-show和ng-hide则不会。