AngularJS指令中的繫結原則執行個體分析_AngularJS

本文執行個體講述了AngularJS指令中的繫結原則。分享給大家供大家參考，具體如下：

在前面的文章中，我們知道了指令如何產生獨立的scope，這一節中我們來仔細研究一下scope中的繫結原則。

總體來說scope的繫結原則分為3種：

（1）@ : 綁定字串

（2）=： 與父控制器進行雙向繫結

（3）&：用於調用父scope中的函數

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

顯示效果：

這是最基礎的方法，實現了字串在scope中的綁定

2.實際上，我們可以通過改寫實現上述的方法

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

可以通過刪除link函數，並且增加@綁定，這樣就成功的實現指令中的屬性與指令scope的字串綁定。

3.‘='綁定

如果使用=綁定，那麼不僅可以改變指令中scope中值，同時也可以改變父控制器中的值，實現雙向繫結。

例子：

<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的值的同時也會改變控制器中相對應的變數的值，實現了控制器和指令中scope的雙向繫結。

效果如下：

3.‘&'方法

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

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

注意傳遞參數的方法。

更多關於AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

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