AngularJs-DOM

一、常用的指令：

1、ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

2、ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

3、ng-hide指令

ng-hide 指令用于隐藏或显示 HTML 元素。

4、ng-if指令

ng-if 指令可以根据表达式的值在DOM中生成或移除一个元素。

二、ng-show、ng-hide、ng-if的区别和联系：

1、ng-show与ng-hide：

这两个指令在本质上是一致的，不过效果相反而已，如ng-hide的value为true时，DOM不显示，而ng-show的value为true时，DOM正常显示；

联系：

元素的显示或隐藏是通过改变CSS的display属性值来实现的。

2、ng-show与ng-if：

ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。

ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。

当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。

StackOverflow上(http://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide??)，也有人提问ng-if和ng-show的差别。这里直接附上结论:

1. ng-if will remove elements from DOM. This means that all your handlers or anything else attached to those elements will be lost. For example, if you bound a click handler to one of child elements, when ng-if evaluates to false, that element will be removed from DOM and your click handler will not work any more, even after ng-if later evaluates to true and displays the element. You will need to reattach the handler.
2. ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles to hide/show elements (note: you might need to add your own classes). This way your handlers that were attached to children will not be lost.
3. ng-if creates a child scope while ng-show/ng-hide does not.

Elements that are not in the DOM have less performance impact and your web app might appear to be faster when using ng-if compared to ng-show/ng-hide. In my experience, the difference is negligible. Animations are possible when using both ng-show/ng-hide and ng-if, with examples for both in the Angular documentation.