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
时间： 2024-10-12 16:13:20