? ? angularJs是google為簡(jiǎn)化web應(yīng)用開發(fā)所研發(fā)出一套MVVM的前端開發(fā)框架，小明在學(xué)習(xí)過(guò)程中遇到最難一點(diǎn)就是其插件開發(fā)(或者說(shuō)是指令)，這里通過(guò)一個(gè)簡(jiǎn)單Dialog對(duì)話框例子來(lái)簡(jiǎn)單講一下angular 指令的幾個(gè)重要知識(shí)點(diǎn)。

項(xiàng)目結(jié)構(gòu)非常簡(jiǎn)單，一個(gè)css文件來(lái)控制dialog插件樣式，一個(gè)js文件來(lái)寫插件的邏輯和視圖模板，另外外部調(diào)用插件的方法寫在了demo里。

首先我們通過(guò)app.directive方式來(lái)聲明插件名

比如：app.directive("angularDialog",function(){}) ,我們聲明了一個(gè)叫angularDialog的指令。

我們將所有邏輯寫到后面回調(diào)函數(shù)中。

這里我們看到了有個(gè)叫restrict屬性，restrict 的取值可以有三種,A代表Attrribute,E表示element,C表示class,一般實(shí)際項(xiàng)目中我們只會(huì)使用A或E，即在html調(diào)用為<angular-dialog></angular-dialog>或

<div angular-dialog></div>

template作用是將視圖模板渲染出來(lái)

link簡(jiǎn)單來(lái)說(shuō)是當(dāng)directive被angular 編譯后，執(zhí)行該方法，function中可以傳三個(gè)參數(shù)scope（當(dāng)前組件的作用域,element只當(dāng)前的dom對(duì)象，此處為angular-dialog，attrs指當(dāng)前指令所綁定attributes）,我們將指令內(nèi)部的數(shù)據(jù)綁定和方法調(diào)用都寫到link中。

scope屬性是這里最難理解的

通過(guò)這個(gè)例子我們可以看到scope中有三個(gè)屬性@,&,=,&最好理解，我們將外部方法綁定到插件內(nèi)部，用&符號(hào)就可以了哇,這里我們外部有一個(gè)fun方法，通過(guò)&就能在指令內(nèi)部去調(diào)用這個(gè)fun方法，@和=作用都是數(shù)據(jù)綁定，區(qū)別在于@是單向的，=是雙向的，從這個(gè)例子中我們可以很清晰看出我們將標(biāo)題和內(nèi)容傳遞到模板中通過(guò)@方式即可，但是我們通過(guò)外部事件變更指令內(nèi)部狀態(tài)則必須使用=。

angularjs指令非常強(qiáng)大，這里只是講了個(gè)皮毛，最后放上demo

https://github.com/minerchow/angularDialog