angular創建自定義指令的四種方式
阿新 • • 發佈：2017-05-06
htm mil 成功 評論 utf-8 例如 angularjs size 限制
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"
2、使用屬性調用：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <
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
angular創建自定義指令的四種方式