一祭饭、介紹
我們之前用到的ng-click渔扎、ng-class、ng-show等都是angular的內(nèi)置指令娄昆，我們也可以自定義指令。自定義指令的基本結(jié)構(gòu)如下：
var myApp=angular.module('myApp',[])
.directive('myDirective',function(){ //以下都已myDirective名字為例
return {
//在此具體定義指令
}
});
通過(guò)directive方法進(jìn)行自定義指令缝彬，函數(shù)返回一個(gè)對(duì)象萌焰，對(duì)象中通過(guò)設(shè)置屬性、方法對(duì)指令進(jìn)行具體的定義谷浅，下面來(lái)介紹一些簡(jiǎn)單的設(shè)置
二扒俯、簡(jiǎn)單自定義指令
1、restrict
restrict共有四個(gè)值一疯，分別是E撼玄、C、M墩邀、A
- E：代表元素element
- C：代表類 class
- A：代表屬性attribute
- M：代表注釋
我們可以設(shè)置為：
restrict:'ECA' //這局是設(shè)置在上例return返回的對(duì)象中的
這句話的意思是如果html中有一個(gè)有一個(gè)元素是myDirective掌猛，或者class中有myDirective、屬性名是myDirective都會(huì)執(zhí)行這個(gè)自定義指令
這里要特別說(shuō)明一下html中的使用：在js中自定義指令時(shí)用駝峰法命名眉睹，使用時(shí)必須分隔符‘-’進(jìn)行連接荔茬，
如：
<my-directive>這里是自定義的指令</my-directive> //對(duì)應(yīng)E
<div class="my-directive">這里是自定義的指令</div> //對(duì)應(yīng)C
<div my-directive>這里是自定義的指令</div> //對(duì)應(yīng)A
2废膘、template/templateUrl
看名字就知道這里是一個(gè)模板，其實(shí)就是一個(gè)html代碼片段兔院，當(dāng)遇到自定義指令時(shí)我們以什么樣的內(nèi)容來(lái)展示這個(gè)指令：
template:'<div>哈哈哈殖卑，測(cè)試，這是一個(gè)自定義指令</div>'
如果這個(gè)模板的內(nèi)容比較復(fù)雜一些坊萝，html內(nèi)容比較多孵稽，我們就可以將它單獨(dú)放到一個(gè)html文件中，用templateUrl屬性十偶，值為這個(gè)html文件的路徑
templateUrl:'template.html' //假設(shè)template中的內(nèi)容也為<div>哈哈哈菩鲜，測(cè)試，這是一個(gè)自定義指令</div>
假如這個(gè)時(shí)候我們只設(shè)置了restrict惦积、template/templateUrl兩個(gè)屬性接校，那么html中的
<my-directive>這里是自定義的指令</my-directive> 最后會(huì)成為
<my-directive><div>哈哈哈，測(cè)試狮崩，這是一個(gè)自定義指令</div></my-directive>
此處僅以element為例蛛勉，class、attribute同理睦柴。
我們可以看到html中原來(lái)的“這里是自定義的指令”內(nèi)容沒(méi)有了
3诽凌、transclude
上面我們看到html中原來(lái)的內(nèi)容消失了，利用transclude可以將原先的內(nèi)容添加的模板中坦敌，如：
template:'<div>哈哈哈侣诵，測(cè)試，這是一個(gè)自定義指令<br/><div ng-transclude></div></div>',
transclude:true //默認(rèn)為false
請(qǐng)注意上面代碼的第一行中模板內(nèi)容有一個(gè)帶有ng-transclude指令的元素狱窘，原來(lái)的內(nèi)容就會(huì)被放入這個(gè)元素內(nèi)
4杜顺、replace
我們的指令"my-directive"在html中并不符合html規(guī)范，而且這也并不是我們想要的內(nèi)容蘸炸，我們僅需要模板中的內(nèi)容躬络，所以可以用replace：true將其去掉，
//自定義指令
return{
restrict:'ECAM',
template:'<div>哈哈哈幻馁，測(cè)試洗鸵，replace為true</div>',
replace:true
}
<test-replace>element</test-replace>
<div class="test-replace">class</div>
<div test-replace>attribute</div>
我們可以看到原始html中指令結(jié)構(gòu)沒(méi)有了，模板內(nèi)容取代了這個(gè)結(jié)構(gòu)仗嗦，但是restrict為E膘滨、C時(shí)會(huì)在模板的最外層加上對(duì)應(yīng)的class或?qū)傩?/strong>
當(dāng)replace時(shí)，模板中必須要有一個(gè)最外層的元素包裹著內(nèi)容稀拐，否則會(huì)報(bào)錯(cuò)
三火邓、總結(jié)
- 駝峰命名法，注意在html中調(diào)用時(shí)要用test-no-replace，分隔符“-”必須要有铲咨，否則 E躲胳、A解析不出來(lái)
- 沒(méi)有replace或者false，模板的內(nèi)容會(huì)嵌入到標(biāo)簽內(nèi)纤勒，替換原來(lái)標(biāo)簽的內(nèi)容
- replace為true坯苹，模板的內(nèi)容會(huì)替換此標(biāo)簽，同時(shí)當(dāng)為C摇天、A時(shí)會(huì)給模板添加對(duì)應(yīng)的class粹湃、attribute
- 當(dāng)replace為true時(shí)，模板中的內(nèi)容必須包含在一個(gè)標(biāo)簽中泉坐，例如：如果直接是一個(gè)字符串“angular"就會(huì)報(bào)錯(cuò)
- transclude包含標(biāo)簽原有的數(shù)據(jù)为鳄，將原有的數(shù)據(jù)嵌入到ng-transclude標(biāo)簽中
自己動(dòng)手實(shí)踐去看看具體的顯示結(jié)果
