一、常用的指令:
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的差别。这里直接附上结论:
-
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, whenng-if
evaluates to false, that element will be removed from DOM and your click handler will not work any more, even afterng-if
later evaluates to true and displays the element. You will need to reattach the handler. -
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. -
ng-if
creates a child scope whileng-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.