AngularJS 自定義指令詳解及實(shí)例代碼
AngularJS支持用戶自定義標(biāo)簽屬性，在不需要使用DOM節(jié)點(diǎn)操作的情況下，添加自定義的內(nèi)容。
前面提到AngularJS的四大特性：
1 MVC
2 模塊化
3 指令
4 雙向數(shù)據(jù)綁定
下面將會(huì)介紹如下的內(nèi)容：
1 如何自定義指令
2 自定義指令的使用
3 自定義指令的內(nèi)嵌使用
如何自定義指令：
Angular是基于模塊的框架，因此上來(lái)肯定要?jiǎng)?chuàng)建一個(gè)自己的模塊：
var myAppModule = angular.module("myApp",[]);
然后在此模塊基礎(chǔ)上創(chuàng)建指令directive
myAppModule.directive("xingoo",function(){
return{
restrict:'AECM',
template:'<div>hello my directive</div>',
repalce:true
}
});
其中，xingoo是我們自定義標(biāo)簽的名字，后面跟著它的方法函數(shù)。
函數(shù)return了一個(gè)鍵值對(duì)組合，其中定義了標(biāo)簽的使用方法、屬性等等內(nèi)容。
那么看看它都定義了哪些內(nèi)容吧：
1 restrict：定義了標(biāo)簽的使用方法，一共四種，分別是AECM
2 template：定義標(biāo)簽的模板。里面是用于替換自定義標(biāo)簽的字符串
3 repalce：是否支持替換
4 transclude：是否支持內(nèi)嵌
如何使用指令：
上面提到了標(biāo)簽的四種使用方法，即AECM。
A attribute屬性：當(dāng)做屬性來(lái)使用
<div xingoo></div>
E element元素：當(dāng)做標(biāo)簽元素來(lái)使用
<xingoo></xingoo>
C class類：當(dāng)做CSS樣式來(lái)使用
<div class="xingoo"></div>
M comments注釋：當(dāng)做注釋使用（這種方式在1.2版本下親測(cè)不可用?。?/p>
<!-- directive:xingoo -->
<div></div>
一般來(lái)說(shuō)推薦，當(dāng)做屬性和元素來(lái)使用。
當(dāng)想要在現(xiàn)有的html標(biāo)簽上擴(kuò)展屬性時(shí)，采用屬性的方式。
當(dāng)想要自定義標(biāo)簽時(shí)，采用標(biāo)簽的形式。
想要使用那種方式，必須要在定義directive中的restrict里面聲明對(duì)應(yīng)的字母。
指令的內(nèi)嵌使用：
因?yàn)闃?biāo)簽內(nèi)部可以嵌套其他的標(biāo)簽，因此想要在自定義標(biāo)簽中嵌套其他的元素標(biāo)簽，則需要：
1 使用transclude屬性，設(shè)置為true。
2 并使用ng-transclude屬性，定義內(nèi)部嵌套的位置。
代碼如下：
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>
運(yùn)行結(jié)果
以上就是對(duì)AngularJS 自定義指令的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！
- 深入講解AngularJS中的自定義指令的使用
- AngularJS創(chuàng)建自定義指令的方法詳解
- AngularJS優(yōu)雅的自定義指令
- AngularJS使用自定義指令替代ng-repeat的方法
- AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例
- AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
- AngularJS 自定義指令詳解及示例代碼
- AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
- AngularJS自定義指令詳解（有分頁(yè)插件代碼）
- 詳解angularJS自定義指令間的相互交互
- AngularJS實(shí)現(xiàn)自定義指令及指令配置項(xiàng)的方法
相關(guān)文章
Angular ng-repeat 對(duì)象和數(shù)組遍歷實(shí)例
這篇文章主要介紹了Angular ng-repeat對(duì)象和數(shù)組遍歷的相關(guān)資料,并附代碼示例，需要的朋友可以參考下2016-09-09
本文主要介紹AngularJS 事件,這里整理了相關(guān)資料,比較詳細(xì)的介紹了AngularJS的使用方法,有需要的小伙伴參考下2016-07-07
AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
這篇文章主要介紹了AngularJS使用ngMessages進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-12-12
使用AngularJS制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程
這篇文章主要介紹了使用Angular.js制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程,AngularJS是一個(gè)非常有人氣的JavaScript庫(kù),文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Angular設(shè)置別名alias及打包命令的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
AngularJS 監(jiān)聽(tīng)變量變化的實(shí)現(xiàn)方法
今天小編就為大家分享一篇AngularJS 監(jiān)聽(tīng)變量變化的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
使用 Github Actions 自動(dòng)部署 Angular 應(yīng)用到 Github Pages的方法
這篇文章主要介紹了使用 Github Actions 自動(dòng)部署 Angular 應(yīng)用到 Github Pages,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
詳解Angularjs 如何自定義Img的ng-load 事件
angular實(shí)現(xiàn)表單驗(yàn)證及提交功能