首页 > 代码库 > angular创建自定义指令的四种方式

angular创建自定义指令的四种方式

2024-09-19 20:50:35   217人阅读

　　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

angular创建自定义指令的四种方式


联系
我们