记录一次AngularJS中的ng-if和ng-show采坑及深入原理剖析

项目场景

事情是这样的：
在我点击按钮打开一个新页面后，重新编译成angular的代码，新打开页面中有dropdown元素需要初始化，而这个元素是受变量控制显示或者隐藏的，这时候用ng-if/ng-show就直接影响了下拉框的初始化是否能成功。

XService.openWindow("xxxx.html",function(){
   $compile( $(".winclass").content() )($scope);
   $('.ui.dropdown').dropdown();
})

其中的 .ui.dropdown是.winclass下面的元素；
如果用ng-if控制.ui.dropdown的显示与否，就会初始化失败，但是用ng-show就可以成功初始化下拉框！

在显示和隐藏上的区别：
1 ng-show是通过display:none/block来控制元素是否显示的。
2 ng-if 是通过表达式的布尔值控制元素移除或者添加到DOM结构中。

在保存状态上的区别：
1 ng-show可以保存上一次显示/隐藏时的状态。
2 ng-if不能保存上次被移除时的状态，每次加载出来就会回到原始状态。

在作用域上的区别：
1 ng-show可以保存上一次的作用域，也就是说作用域不会改变。
2 ng-if每一加载出来都会通过原型继承从父作用域生成一个新作用域，每次被移除时，也会销毁当前作用域。

所以不难解释我在项目中遇到的问题了：
因为上面的代码是同步执行的，在编译环节，计算ng-if的值来添加下拉框元素，同时进行下拉框的初始化，而元素的添加还没完成，就造成初始化下拉框时元素不存在，导致初始化下拉框失败。

解决方式：
1 异步执行，加一个延时函数执行初始化，这样能保证是编译完成之后才会执行初始化操作。
2 用ng-show，这样就不会在初始化时下拉框元素不存在的情况发生了，因为ng-show只控制元素的显示与否，元素本身的是一直存在于DOM结构中的。