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则不会。