angular除了內置的部分指令，還可以通過.directive來自定義指令。要調用自定義指令，HTML 元素上需要添加自定義指令名。使用駝峰法來命名一個指令：nsHeader，在調用時使用需要-來分割：ns-header。自定義指令調用的的方式有四種，如下：
- 元素名
- 屬性
- 類名
- 注釋
1、使用元素名調用：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="utf-8">
5 <script src="js/angular/angular.js" type="text/javascript" charset="utf-8"></script>
6 <title>angular指令</title>
7 </head>
8 <body>
9 <ns-header></ns-header>
10
11 <script type="text/javascript">
12 var app = angular.module("myApp", []); 13 app.directive("nsHeader", function(){ 14 return { 15 template: "<header>這個是頭部指令！</header>"
16 }; 17 }); 18 </script>
19 </body>
20 </html>
2、使用屬性調用：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="utf-8">
5 <script src="js/angular/angular.js" type="text/javascript" charset="utf-8"></script>
6 <title>angular指令</title>
7 </head>
8 <body>
9 <div ns-header></div>
10
11 <script type="text/javascript">
12 var app = angular.module("myApp", []); 13 app.directive("nsHeader", function(){ 14 return { 15 template: "<header>這個是頭部指令!</header>"
16 }; 17 }); 18 </script>
19 </body>
20 </html>
3、使用類名調用：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="utf-8">
5 <script src="js/angular/angular.js" type="text/javascript" charset="utf-8"></script>
6 <title>angular指令</title>
7 </head>
8 <body>
9 <div class="ns-header"></div>
10
11 <script type="text/javascript">
12 var app = angular.module("myApp", []); 13 app.directive("nsHeader", function(){ 14 return { 15 restrict: 'C', 16 template: "<header>這個是頭部指令!</header>"
17 }; 18 }); 19 </script>
20 </body>
21 </html>
注：你必須設置 restrict 的值為 "C" 才能通過類名來調用指令。
4、使用注釋調用：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="utf-8">
5 <script src="js/angular/angular.js" type="text/javascript" charset="utf-8"></script>
6 <title>angular指令</title>
7 </head>
8 <body>
9 <!-- directive: ns-header -->
10
11 <script type="text/javascript">
12 var app = angular.module("myApp", []); 13 app.directive("nsHeader", function(){ 14 return { 15 restrict : "M", 16 replace : true, 17 template: "<header>這個是頭部指令!</header>"
18 }; 19 }); 20 </script>
21 </body>
22 </html>
注：需要在該實例添加 replace 屬性， 否則評論是不可見的。必須設置 restrict 的值為 "M" 才能通過注釋來調用指令。調用時，注釋內中的-和字母間需要添加空格，否則無法調用成功，例如<!--directive: ns-header-->則為錯誤調用方式。
你也可以通過限制指令只能通過特殊的方式調用，例如限定只能通過屬性的方式來調用：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="utf-8">
5 <script src="js/angular/angular.js" type="text/javascript" charset="utf-8"></script>
6 <title>angular指令</title>
7 </head>
8 <body>
9 <ns-header></ns-header><!--此種方式不生效-->
10
11 <div ns-header></div><!--只能通過屬性方式調用-->
12
13 <script type="text/javascript">
14 var app = angular.module("myApp", []); 15 app.directive("nsHeader", function(){ 16 return { 17 restrict : "A", 18 template: "<header>這個是頭部指令!</header>"
19 }; 20 }); 21 </script>
22 </body>
23 </html>
注：當指定restrict為"A"時，只能通過屬性方式調用。
restrict的值有以下四種，默認為E和A，即通過元素名和屬性來調用指令：
- E作為元素名使用
- A作為屬性使用
- C作為類名使用
- M作為注釋使用
本文參考地址：http://www.runoob.com/angularjs/angularjs-directives.html