在angularjs的指令中存在著三種繫結策略，他們分別是’=’,’@’,’&’

全文討論圍繞下面這個例子，可在進入codepen編輯

‘=’繫結策略

• ‘=or（=attr）’，雙向繫結，將本地作用域上的屬性同父級作用域上的屬性進行雙向的資料繫結。就像本地的資料雙向繫結一樣，本地屬性會反映出父級資料模型中發生的變化,使用可以是=，自動繫結 or = attr(屬性名)；
  控制器中，我定義了title和text的值，這裡

<div class="body" ng-show="showMe" ng-transclude></div>
 

ng-transclude 將指令包裹的內容放到了這段標籤裡面，即編譯過後應該是

<div class="body" ng-show="showMe" ng-transclude>
  <span class="ng-binding ng-scope">
    {{text}}
  </span>
</div>

使用可以是=，自動繫結 or = attr(屬性名)；

從上面的例子我們可以知道

scope : {
    title: '=expanderTitle'
}

指令內的title繫結的值為expanderTitle中定義的值，即title

於是我們可以在template中引用{{title}}，這裡的{{title}}便是在指令隔離作用域上的scope（指令的隔離作用域便是通過這種方式來跟父級作用域聯絡的），這裡的scope也可以這樣寫

scope : {
    expanderTitle: '='//自動繫結
}

這時候如果在template中想引用控制器作用域上的title,則要將template中的{{title}}改成{{expanderTitle}},這裡可以理解是在指令的隔離作用域上給了父作用域上的title一個別名expanderTitle

@’繫結策略

• ‘@（or @attr）’，本地作用域屬性，使用@將本地作用域同DOM屬性的值進行繫結。

這裡如果把指令上的scope改成

scope : {
    title: '@expanderTitle'//自動繫結
}

這個時候的{{title}}的值就是在DOM屬性中expanderTitle的值，即title

同樣也可以這樣寫

scope : {
    expanderTitle: '@'//自動繫結
}

這個時候把{{title}}改成{{expanderTitle}}就跟上面效果一樣；

‘&’繫結策略

• & or（&attr）’，父作用域繫結，通過&符號可以對父作用域進行繫結，已變在其中執行函式。意味著對這個值進行設定時會生成一個指向父級作用域的包裝函式。

這裡把程式碼改一下，在指令scope中新增

onSend: '&'

指令中的template改為

template : '<div>'
         + '<div class="title" ng-click="onSend()">{{title}}</div>'
         + '<div class="body" ng-show="showMe" ng-transclude></div>'
         + '</div>',

父級控制器中新增sendSomething方法

$scope.sendSomething=function(name){
    alert(name);
}

Dom中新增on-send的屬性

<expander class='expander' on-send="sendSomething('something')" expander-title='title'>
                {{text}}
</expander>

這裡便把指令中的onSend中的包裝函式sendSomething在父級作用域中執行了，執行結果是彈出something；

同樣這裡的scope也可以改成 onSend:’&onSend’形式；

如果你跟著我也嘗試著做了上面的這些東西，相信你也一定了解了angularjs指令中的三種繫結策略！