AngularJS中ng-if、ng-show和ng-hide的区别

最近项目中有一个页面一直报错，但是又可以正常使用，和其他页面对比后发现将ng-show改为ng-if之后报错提示就消失了，觉得很有必要找到问题根本原因

实现原理

ng-show/ng-hide是根据表达式通过css样式方式来控制元素的显示与隐藏，类似display:"none"的效果，对应的DOM元素会一直存在于当前页面中。而ng-if是根据表达式的值动态的在当前的页面中添加/删除页面元素，如果赋值表达式的值为false，那么这个元素就会从页面中删除，否则会添加一个元素。

主要区别

ng-if重新创建元素时用的是它们编译后的状态，如果ng-if内部的代码加载之后被jQuery修改过（例如用addClass），那么当ng-if的表达式值为false时，这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。而ng-show和ng-hide则可以保留DOM元素上次修改后的状态
作用域方面两者也存在差异，当一个元素被ng-if从DOM中删除时，与其关联的作用域也会被销毁。而且当它重新加入DOM中时，则会生成一个新的作用域，而ng-show和ng-hide则不会

实际案例

通过编写代码在浏览器中我们可以很明显的看到两者的区别

#页面html代码片段

  

     ng-show = false 
  
  

     ng-show=true 
  
  
  

     ng-if = true
  
  
  
  

还有一个我觉得非常好的案例戳这里，可是说是很直观了，这里就不直接搬运了

项目问题

看完两者的区别之后，回到自己的项目中，发现报错的原因是因为我使用了ng-show来控制内容的显示与隐藏，所以无论表达式的值是true或者false，页面都会先将DOM元素加载出来。但是DOM元素能否加载其实依赖某个值是否存在，而这个值是需要去后台进行查询的，所以页面一开始无法获取到这个值，js中就报错了。最后将ng-show替换成ng-if，等值查询出来再去显示DOM元素就不会有问题啦~

参考1：(十四)ng-if与ng-show、ng-hide指令的区别和注意事项
参考2：Angular.js中ng-if、ng-show和ng-hide的区别介绍