angularjs中的指令實(shí)踐開發(fā)指南(二)_angularjs

《angularjs中的指令實(shí)踐開發(fā)指南(二)_angularjs》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、AngularJS中的指令實(shí)踐開發(fā)指南(二)在AngularJS中的指令實(shí)踐指南(一)中給大家介紹了，如何隔離一個(gè)指令的scopeo第二部分將承接上一篇繼續(xù)介紹。首先，我們會(huì)看到在使用隔離scope的情況下，如何從指令內(nèi)部訪問(wèn)到父scope的屬性。接著，我們會(huì)基于對(duì)controller函數(shù)和transclusions討論如何為指令選擇.正確的scope。這篇文章的最后會(huì)以通過(guò)一個(gè)完整的記事本應(yīng)用來(lái)實(shí)踐指令的使用。隔離scope和父scope之間的數(shù)據(jù)綁定通常'，隔離指令的scope會(huì)帶來(lái)很多的便利，尤其是在你要操作多個(gè)scope模型的時(shí)候。但冇時(shí)為了使代碼能

2、夠正確工作，你也需要從指令內(nèi)部訪問(wèn)父scope的屈性。好消息是Angular給了你足夠的靈活性讓你能夠有選擇性的通過(guò)綁定的方式傳入父scope的屈性。讓我們重溫一下我們的helloWorld指令，它的背景色會(huì)隨著用戶在輸入框中輸入的顏色名稱而變化。還記得當(dāng)我們對(duì)這個(gè)指令使用隔離scope的之后，它不能工作了嗎？現(xiàn)在，我們來(lái)讓它恢復(fù)正常。假設(shè)我們已經(jīng)初始化完成app這個(gè)變量所指向的Angular模塊。那么我們的helloWorld指令如下面代碼所示：app.directive(，helloWorld，,function(){return{scope:{},re

3、strict:'AE',replace:true,template:'〈pstyle二〃background-color:{{color}}〃〉HelloWorld

4、sor','pointer');})；}}；})；使用這個(gè)指令的HTML標(biāo)簽如下:上面的代碼現(xiàn)在是不能工作的。因?yàn)槲覀冇昧艘粋€(gè)隔離的scope,指令內(nèi)部的{{color}}表達(dá)式被隔離在指令內(nèi)部的scope屮（不是父scope）o但是外而的輸入框元素中的ng-model指令是指向父scope中的color屬性的。所以，我們需要一種方

5、式來(lái)綁定隔離scope和父scope中的這兩個(gè)參數(shù)。在Angular中，這種數(shù)據(jù)綁定可以通過(guò)為指令所在的HTML元索添加屬性和并指令定義對(duì)象中配置相應(yīng)的scope屬性來(lái)實(shí)現(xiàn)。讓我們來(lái)細(xì)究一下建立數(shù)據(jù)綁定的幾種方式。選擇一：使用@實(shí)現(xiàn)單向文本綁定在下而的指令定義屮，我們指定了隔離scope屮的屈性color綁定到指令所在HTML元素上的參數(shù)colorAttrc在HTML標(biāo)記中,你可以看到{{color}}表達(dá)式被指定給了color-attr參數(shù)。當(dāng)表達(dá)式的值發(fā)生改變吋，color-attr參數(shù)也跟著改變。隔離scope中的color屬性的值也相應(yīng)地被改變。ap

6、p.directive('helloWorld，,function(){return{scope:{color:'@colorAttr，},????//therestoftheconfigurations}；})；更新后的HTML標(biāo)記代碼如F:〈inputtype二〃text"ng-model二〃color"placeholder?二〃Enteracolor，，/>我們稱這種方式為單項(xiàng)綁定，是因?yàn)樵谶@種方式下，你

7、只能將字符串（使用表達(dá)式{{}}）傳遞給參數(shù)。當(dāng)父scope的屬性變化時(shí)，你的隔離scope模型中的屬性值跟著變化。你其至可以在指令內(nèi)部監(jiān)控這個(gè)scope屬性的變化，并且觸發(fā)一些任務(wù)。然而，反向的傳遞并不工作。你不能通過(guò)對(duì)隔離scope屬性的操作來(lái)改變父scope的值。注意點(diǎn):當(dāng)隔離scope屈性和指令元素參數(shù)的名字一樣是，你可以更簡(jiǎn)單的方式設(shè)置scope綁定：app.directiveChelloWorld，,function(){return{scope:{color:?},????//therestoftheconfigurations};});相應(yīng)使

8、用指令的HTML代碼如下：