AngularJS指令中的綁定策略實例分析

更新時間：2016年12月14日 11:01:17 作者：小小小小小亮

這篇文章主要介紹了AngularJS指令中的綁定策略,結(jié)合實例形式分析了scope綁定策略的分類與具體實現(xiàn)方法,需要的朋友可以參考下

本文實例講述了AngularJS指令中的綁定策略。分享給大家供大家參考，具體如下：

在前面的文章中，我們知道了指令如何生成獨立的scope，這一節(jié)中我們來仔細研究一下scope中的綁定策略。

總體來說scope的綁定策略分為3種：

（1）@ : 綁定字符串

（2）=：與父控制器進行雙向綁定

（3）&：用于調(diào)用父scope中的函數(shù)

1.基礎方式

<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;
     }
    }
});

顯示效果：

這是最基礎的方法，實現(xiàn)了字符串在scope中的綁定

2.實際上，我們可以通過改寫實現(xiàn)上述的方法

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"<div>{{word}}</div>",
    }
});

可以通過刪除link函數(shù)，并且增加@綁定，這樣就成功的實現(xiàn)指令中的屬性與指令scope的字符串綁定。

3.‘='綁定

如果使用=綁定，那么不僅可以改變指令中scope中值，同時也可以改變父控制器中的值，實現(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的值的同時也會改變控制器中相對應的變量的值，實現(xiàn)了控制器和指令中scope的雙向綁定。

效果如下：

3.‘&'方法

<test greet="sayHello()"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      greet:'&'
     },
     template:"<div ng-click='sayHello({name:'yuxiaoliang'})'>點擊說HELLO</div>",
    }
});

注意傳遞參數(shù)的方法。

更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章:

AngularJS表單驗證中級篇（3）
這篇文章主要為大家詳細介紹了AngularJS表單驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
AngularJS基礎 ng-click 指令示例代碼
本文介紹AngularJS ng-click 指令,這里整理了ng-click指令的基礎知識并且附有簡單示例代碼和實現(xiàn)效果圖,有需要的小伙伴參考下
2016-08-08
Angular封裝搜索框組件操作示例
這篇文章主要介紹了Angular封裝搜索框組件操作,結(jié)合實例形式分析了基于Angular組件庫實現(xiàn)搜索功能的封裝操作相關實現(xiàn)步驟與注意事項,需要的朋友可以參考下
2019-04-04
Angular實現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能示例
這篇文章主要介紹了Angular實現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能,涉及AngularJS過濾器、排序及字符串遍歷、查詢等相關操作技巧,需要的朋友可以參考下
2017-12-12
詳解Angular16如何獲取路由參數(shù)
這篇文章主要為大家介紹了Angular16如何獲得路由參數(shù)的實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
AngularJS初始化靜態(tài)模板詳解
這篇文章主要為大家介紹了AngularJS初始化靜態(tài)模板，AngularJS初始化靜態(tài)模板有兩種方式，一是通過ng-app來自動初始化模塊，也可以通過angular.bootstrap(document, [module])手動啟動應用，感興趣的小伙伴們可以參考一下
2016-01-01
angularjs的單選框+ng-repeat的實現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Angular中的NgZone.run()有什么用途
在Angular中,NgZone是一個服務,用于管理異步任務的執(zhí)行,并提供一種在Angular區(qū)域內(nèi)或外部顯式運行代碼的方式,NgZone.run方法是一種顯式在Angular區(qū)域內(nèi)運行函數(shù)的方式,本文介紹Angular中的NgZone.run()有什么用,感興趣的朋友一起看看吧
2024-01-01
AngularJS表單編輯提交功能實例
這篇文章主要介紹了AngularJS表單編輯提交功能實例,本文講解如何修改表單的默認值,需要的朋友可以參考下
2015-02-02
AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例
這篇文章主要介紹了AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能,結(jié)合實例形式分析了AngularJS自定義過濾器的定義及數(shù)組過濾相關操作技巧,需要的朋友可以參考下
2018-04-04