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中值，同時也可以改變父控制器中的值，實現雙向綁定。

範例：

   ctrl:
   

<test word="{{wordCtrl}}"></test>

   

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"directive:<input ng-model=&#39;word&#39; />",
    }
});

   

效果就是，改變了指令中scope的值的同時也會改變控制器中相對應的變數的值，達到了就是，改變了指令中scope的值的同時也會改變控制器中相對應的變數的值，達到了對應的系統綁定。

效果如下：

3.‘&'方法

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

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

注意傳遞參數的方法。

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

更多AngularJS指令中的綁定策略實例分析相關文章請關注PHP中文網！