AngularJS可以把模版编写成HTML的形式，利用指令来拓展HTML标签，增加声明式语法来实现想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和节点指令。
渲染指令
ng-bind：
|
1
|
<
p
ng-bind
=
"something"
></
p
>
|
相当于：
|
1
|
<
p
>`something`</
p
>
|
ng-bind-template：
如果用ng-bind-template,则相当于：
|
1
|
<
p
ng-bind-template
=
"`something`"
></
p
>
|
ng-init：
初始化一个变量。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
ng-app
=
"app"
>
<
div
ng-controller
=
"Controller1"
ng-init
=
"something='what a hot day!'"
>
<
p
>`something`</
p
>
</
div
>
<
script
src
=
"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
angular.module('app', [])
.controller('Controller1', ['$scope', function(parm) {
parm.something = 'hello world';
}]);
</
script
>
</
body
>
</
html
>
|
在页面显示的是what a hot day。
ng-repeat：
循环输出。
其中，$index为当前循环到的下标，boolean值$first表示是否为头元素，boolean值$last表示是否为尾元素，boolean值$middle表示是否为非头非尾元素。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
ng-app
=
"app"
>
<
div
ng-controller
=
"Controller1"
ng-init
=
"array = ['one','two','three','four']"
>
<
ul
ng-repeat
=
"item in array"
>
<
li
>index:{{$index}}</
li
>
<
li
>isFirst?{{$first}}</
li
>
<
li
>isMiddle?{{$middle}}</
li
>
<
li
>isLast?{{$last}}</
li
>
</
ul
>
</
div
>
<
script
src
=
"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
angular.module('app', [])
.controller('Controller1', function($scope) {});
</
script
>
</
body
>
</
html
>
|
结果为：
ng-include：
加载另一个HTML页面。
|
1
|
<
div
ng-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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
ng-app
=
"app"
>
<
div
ng-controller
=
"Controller1"
>
<!-- input只要变化就会重新计算anything -->
<
input
type
=
"text"
ng-model
=
"something"
ng-change
=
"anything = something*2"
/>
<
p
>`anything`</
p
>
</
div
>
<
script
src
=
"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"
></
script
>
<
script
type
=
"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：
|
1
2
3
4
|
<
ul
ng-switch
on
=
"expression"
>
<
li
ng-switch-when
=
"true"
>good</
li
>
<
li
ng-switch-when
=
"false"
>bad</
li
>
</
ul
>
|
如果expression为true，显示good，否则会显示bad。
ng-src：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
ng-app
=
"app"
>
<
div
ng-controller
=
"Controller1"
>
<
img
ng-src
=
"`src`"
>
</
div
>
<
script
src
=
"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"
></
script
>
<
script
type
=
"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。
