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

顯示效果：

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

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

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

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

3.‘='綁定

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

效果如下：

3.‘&'方法

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

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

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

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

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: