AngularJS指令中的綁定策略實例分析-js教程-PHP中文網

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

高洛峰

發布： 2016-12-24 09:51:25

原創

1056 人瀏覽過

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

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

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

（1）@ : 綁定字串

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

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

1.基礎方式

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

登入後複製

app.controller(&#39;myController1&#39;,[&#39;$scope&#39;,function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});

登入後複製

顯示效果：

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

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

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

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

登入後複製

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

3.‘='綁定

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

範例：


   ctrl:
   

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

登入後複製

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

登入後複製

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

效果如下：

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

3.‘&'方法

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

登入後複製

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

登入後複製

注意傳遞參數的方法。

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

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