先從定義一個簡單的指令開始疲扎。 定義一個指令本質(zhì)上是在HTML中通過元素棚点、屬性早处、類或注釋來添加功能。
AngularJS的內(nèi)置指令都是以ng開頭瘫析，如果想自定義指令砌梆，建議自定義一個前綴代表自己的命名空間。
這里我們先使用my作為前綴:
控制器
directive('my-directive',[function(){
return{
template : "<h2>我是自定義指令內(nèi)的模板</h2>",
// 默認(rèn)只支持屬性和標(biāo)簽
restrict : "ECMA",
// 如果是注釋的話一定要用replace
replace : true,
}
}])
視圖
<h1>標(biāo)簽形式</h1>
<my-directive></my-directive>
<hr>
<h1>屬性形式</h1>
<div my-directive></div>
<hr>
<h1>class形式</h1>
<div class="my-directive"></div>
<hr>
<h1>注釋形式</h1>
<!-- directive:my-directive -->
效果展示
下面我們分析一下上面的代碼：
directive()
<code>directive()</code>接受兩個參數(shù)
- my-directive：指的是指令的名字name
- factory_function：函數(shù)贬循，指令的行為
應(yīng)用啟動時咸包，以name作為該應(yīng)用的標(biāo)識注冊factory_function返回的對象。
在factory_function中杖虾，我們可以設(shè)置一些選項來改變指令的行為烂瘫。
template
返回一段字符串作為模板
restrict
該屬性用于定義指令以什么形式被使用，這是一個可選參數(shù)奇适，元素（E）坟比、屬性（A）、類（C）嚷往、注釋（M）葛账，當(dāng)然也可以寫EAMC，代表全部形式可用皮仁。
replace(替換元素)
默認(rèn)為 false籍琳，就是將模版的內(nèi)容追加到元素中，如果設(shè)置為 true贷祈，那么模版的內(nèi)容將會替換元素的內(nèi)容
那么我們以以上代碼為例看一下吧
當(dāng)replace：false //(默認(rèn))
模板插入到我們自定義的指令內(nèi)部
當(dāng)replace：true
模板替換了我們自定義的指令內(nèi)部
最后加一個templateUrl屬性
這個就和上面的template很像了趋急，只不過這次是通過URL請求一個模板
templateUrl : "./footer.html"
這里需要注意：URL模板只能在服務(wù)器上才能實現(xiàn)，而且footer.html內(nèi)只能有一個最外層標(biāo)簽势誊，注釋及腳本的引用都只能在這個標(biāo)簽內(nèi)使用呜达，否則會報錯。
