AngularJS指令中的綁定策略實(shí)例分析
本文實(shí)例講述了AngularJS指令中的綁定策略。分享給大家供大家參考，具體如下：
在前面的文章中，我們知道了指令如何生成獨(dú)立的scope，這一節(jié)中我們來仔細(xì)研究一下scope中的綁定策略。
總體來說scope的綁定策略分為3種：
（1）@ : 綁定字符串
（2）=： 與父控制器進(jìn)行雙向綁定
（3）&：用于調(diào)用父scope中的函數(shù)
1.基礎(chǔ)方式
<test word="{{wordCtrl}}"></test>
app.controller('myController1',['$scope',function($scope){
$scope.wordCtrl="hello";
}]);
app.directive('test',function(){
return{
restrict:'E',
template:"<div>{{word}}</div>",
link:function(scope,ele,attr){
scope.word=attr.word;
}
}
});
顯示效果：
這是最基礎(chǔ)的方法，實(shí)現(xiàn)了字符串在scope中的綁定
2.實(shí)際上，我們可以通過改寫實(shí)現(xiàn)上述的方法
app.directive('test',function(){
return{
restrict:'E',
scope:{
word:'@'
},
template:"<div>{{word}}</div>",
}
});
可以通過刪除link函數(shù)，并且增加@綁定，這樣就成功的實(shí)現(xiàn)指令中的屬性與指令scope的字符串綁定。
3.‘='綁定
如果使用=綁定，那么不僅可以改變指令中scope中值，同時(shí)也可以改變父控制器中的值，實(shí)現(xiàn)雙向綁定。
例子：
<div>
<span>ctrl:</span>
<input ng-model="wordCtrl"/>
</div>
<test word="{{wordCtrl}}"></test>
app.directive('test',function(){
return{
restrict:'E',
scope:{
word:'@'
},
template:"directive:<input ng-model='word' />",
}
});
效果就是，改變了指令中scope的值的同時(shí)也會(huì)改變控制器中相對(duì)應(yīng)的變量的值，實(shí)現(xiàn)了控制器和指令中scope的雙向綁定。
效果如下：
3.‘&'方法
<test greet="sayHello()"></test>
app.directive('test',function(){
return{
restrict:'E',
scope:{
greet:'&'
},
template:"<div ng-click='sayHello({name:'yuxiaoliang'})'>點(diǎn)擊說HELLO</div>",
}
});
注意傳遞參數(shù)的方法。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了AngularJS表單驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
AngularJS基礎(chǔ) ng-click 指令示例代碼
本文介紹AngularJS ng-click 指令,這里整理了ng-click指令的基礎(chǔ)知識(shí)并且附有簡單示例代碼和實(shí)現(xiàn)效果圖,有需要的小伙伴參考下2016-08-08
這篇文章主要介紹了Angular封裝搜索框組件操作,結(jié)合實(shí)例形式分析了基于Angular組件庫實(shí)現(xiàn)搜索功能的封裝操作相關(guān)實(shí)現(xiàn)步驟與注意事項(xiàng),需要的朋友可以參考下2019-04-04
Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能,涉及AngularJS過濾器、排序及字符串遍歷、查詢等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要為大家介紹了Angular16如何獲得路由參數(shù)的實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了AngularJS初始化靜態(tài)模板，AngularJS初始化靜態(tài)模板有兩種方式，一是通過ng-app來自動(dòng)初始化模塊，也可以通過angular.bootstrap(document, [module])手動(dòng)啟動(dòng)應(yīng)用，感興趣的小伙伴們可以參考一下2016-01-01
angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在Angular中,NgZone是一個(gè)服務(wù),用于管理異步任務(wù)的執(zhí)行,并提供一種在Angular區(qū)域內(nèi)或外部顯式運(yùn)行代碼的方式,NgZone.run方法是一種顯式在Angular區(qū)域內(nèi)運(yùn)行函數(shù)的方式,本文介紹Angular中的NgZone.run()有什么用,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了AngularJS表單編輯提交功能實(shí)例,本文講解如何修改表單的默認(rèn)值,需要的朋友可以參考下2015-02-02
AngularJS使用Filter自定義過濾器控制ng-repeat去除重復(fù)功能示例
這篇文章主要介紹了AngularJS使用Filter自定義過濾器控制ng-repeat去除重復(fù)功能,結(jié)合實(shí)例形式分析了AngularJS自定義過濾器的定義及數(shù)組過濾相關(guān)操作技巧,需要的朋友可以參考下2018-04-04