javascript
【AngularJS】—— 8 自定义指令
如何自定義指令：
Angular是基于模塊的框架，因此上來肯定要創建一個自己的模塊：
var myAppModule = angular.module("myApp",[]);然后在此模塊基礎上創建指令directive
myAppModule.directive("xingoo",function(){return{restrict:'AECM',template:'<div>hello my directive</div>',replace:true}});其中，xingoo是我們自定義標簽的名字，后面跟著它的方法函數。
函數return了一個鍵值對組合，其中定義了標簽的使用方法、屬性等等內容。
那么看看它都定義了哪些內容吧：
1 restrict：定義了標簽的使用方法，一共四種，分別是AECM
2 template：定義標簽的模板。里面是用于替換自定義標簽的字符串
3 replace：是否支持替換
4 transclude：是否支持內嵌
如何使用指令：
上面提到了標簽的四種使用方法，即AECM。
A attribute屬性：當做屬性來使用
<div xingoo></div>E element元素：當做標簽元素來使用
<xingoo></xingoo>C class類：當做CSS樣式來使用
<div class="xingoo"></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 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>',replace:true}});myAppModule.directive("test",function(){return{restrict:'AECM',transclude:true,template:"<div>haha! <div ng-transclude></div> wuwu!</div>"}});</script></body> </html>運行結果
本文轉自博客園xingoo的博客，原文鏈接：【AngularJS】—— 8 自定義指令，如需轉載請自行聯系原博主。
總結
以上是生活随笔為你收集整理的【AngularJS】—— 8 自定义指令的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于warning: Clock ske
- 下一篇： SpringCloud（第 054 篇）