本文實例講述了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架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
