AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和节点指令。


渲染指令

ng-bind:

<png-bind="something"></p>

相当于:

<p>`something`</p>


ng-bind-template:

如果用ng-bind-template,则相当于:

<png-bind-template="`something`"></p>


ng-init:

初始化一个变量。

<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><bodyng-app="app"><divng-controller="Controller1"ng-init="something='whatahotday!'"><p>`something`</p></div><scriptsrc="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script><scripttype="text/javascript">angular.module('app',[]).controller('Controller1',['$scope',function(parm){parm.something='helloworld';}]);</script></body></html>

在页面显示的是what a hot day。


ng-repeat:

循环输出。

其中,$index为当前循环到的下标,boolean值$first表示是否为头元素,boolean值$last表示是否为尾元素,boolean值$middle表示是否为非头非尾元素。

<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><bodyng-app="app"><divng-controller="Controller1"ng-init="array=['one','two','three','four']"><ulng-repeat="iteminarray"><li>index:{{$index}}</li><li>isFirst?{{$first}}</li><li>isMiddle?{{$middle}}</li><li>isLast?{{$last}}</li></ul></div><scriptsrc="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script><scripttype="text/javascript">angular.module('app',[]).controller('Controller1',function($scope){});</script></body></html>

结果为:

ng-include:

加载另一个HTML页面。

<divng-include="'http://www.scut.edu.cn/jw2005/'"></div>

使用ng-include加载另一页面到当前页面,浏览器会提示错误。使用ng-include指令的时候,会用到AJAX请求XMLHttpRequest。但是我们是直接用浏览器打开的当前网页,并没有通过web容器访问,所以存在跨域访问问题,加载http://www.scut.edu.cn/jw2005/也就失败了。解决办法很简单:将代码部署到tomcat等web容器下,通过http访问即可。或者使用webstorm,会自动地启动web容器。


事件指令

ng-click,ng-dbclick,ng-mousedown,ng-mouseup,ng-mouseenter,ng-mouseleave,ng-mousemove,ng-over,ng-submit 这些和JavaScript原生的on-系列指令是类似的。


ng-change:

<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><bodyng-app="app"><divng-controller="Controller1"><!--input只要变化就会重新计算anything--><inputtype="text"ng-model="something"ng-change="anything=something*2"/><p>`anything`</p></div><scriptsrc="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script><scripttype="text/javascript">angular.module('app',[]).controller('Controller1',function(){});</script></body></html>


节点指令

ng-style:

和HTML的style是一样的。


ng-class:

ng-class="{className:expression}" 如果expression为true,则使用className这个class。


ng-class-odd:

多用于表格,单数行的样式。


ng-class-even:

多用于表格,偶数行的样式。


ng-show:

ng-show="expression"如果expression为true,则显示。


ng-hide:

ng-hide="expression"如果expression为true,则隐藏。


ng-switch:

<ulng-switchon="expression"><ling-switch-when="true">good</li><ling-switch-when="false">bad</li></ul>

如果expression为true,显示good,否则会显示bad。


ng-src:

<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><bodyng-app="app"><divng-controller="Controller1"><imgng-src="`src`"></div><scriptsrc="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script><scripttype="text/javascript">angular.module('app',[]).controller('Controller1',function($scope){$scope.src='https://www.baidu.com/img/bdlogo.png';});</script></body></html>


ng-href:

类似ng-src。


ng-if:

类似ng-show。