AngularJS 自定義指令詳解及實例代碼

2019-11-20 09:00:10

字體：大中小

來源：轉載

供稿：網友

AngularJS支持用戶自定義標簽屬性，在不需要使用DOM節點操作的情況下，添加自定義的內容。

前面提到AngularJS的四大特性：

　　1 MVC

　　2 模塊化

　　3 指令

　　4 雙向數據綁定

下面將會介紹如下的內容：

　　1 如何自定義指令

　　2 自定義指令的使用

　　3 自定義指令的內嵌使用

　　如何自定義指令：

　　Angular是基于模塊的框架，因此上來肯定要創建一個自己的模塊：

var myAppModule = angular.module("myApp",[]);

　　然后在此模塊基礎上創建指令directive

 myAppModule.directive("xingoo",function(){    return{     restrict:'AECM',     template:'<div>hello my directive</div>',     repalce:true    }   });

　　其中，xingoo是我們自定義標簽的名字，后面跟著它的方法函數。

　　函數return了一個鍵值對組合，其中定義了標簽的使用方法、屬性等等內容。

　　那么看看它都定義了哪些內容吧：

　　1 restrict：定義了標簽的使用方法，一共四種，分別是AECM

　　2 template：定義標簽的模板。里面是用于替換自定義標簽的字符串

　　3 repalce：是否支持替換

　　4 transclude：是否支持內嵌

　　如何使用指令：

　　上面提到了標簽的四種使用方法，即AECM。

　　A attribute屬性：當做屬性來使用

　　E element元素：當做標簽元素來使用

　　C class類：當做CSS樣式來使用

　　M comments注釋：當做注釋使用（這種方式在1.2版本下親測不可用！）

<div></div>

　　一般來說推薦，當做屬性和元素來使用。

　　當想要在現有的html標簽上擴展屬性時，采用屬性的方式。

　　當想要自定義標簽時，采用標簽的形式。

　　想要使用那種方式，必須要在定義directive中的restrict里面聲明對應的字母。

　　指令的內嵌使用：

　　因為標簽內部可以嵌套其他的標簽，因此想要在自定義標簽中嵌套其他的元素標簽，則需要：

　　1 使用transclude屬性，設置為true。

　　2 并使用ng-transclude屬性，定義內部嵌套的位置。

　　代碼如下：

  myAppModule.directive("test",function(){    return{     restrict:'AECM',     transclude:true,     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"    }   });

　　全部代碼

<!doctype html><html ng-app="myApp"> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body>    <xingoo></xingoo>  <div xingoo></div>  <div class="xingoo"></div>  <!-- directive:xingoo -->  <div></div>  <hr>  <xingoo>3333</xingoo>  <hr>  <test>4444</test>  <script type="text/javascript">   var myAppModule = angular.module("myApp",[]);   myAppModule.directive("xingoo",function(){    return{     restrict:'AECM',     template:'<div>hello my directive</div>',     repalce:true    }   });   myAppModule.directive("test",function(){    return{     restrict:'AECM',     transclude:true,     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"    }   });  </script> </body></html>

　　運行結果