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屬性：當做屬性來使用
<div xingoo></div>
E element元素：當做標籤元素來使用
<xingoo></xingoo>
C class類：當做CSS樣式來使用
<div></div>
M comments註釋：當做註釋使用（這種方式在1.2版本下親測不可用！）
<!-- directive:xingoo -->
<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></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>運行結果
以上就是對AngularJS 自定義指令的資料整理，後續繼續補充相關資料，謝謝大家對本站的支持！