今天，我來談談angularJs指令的3種綁定策略。

公司最近大量使用angularJs做單頁面應用，就免不了使用angularJs的一些組件，而有的組件網上有現成的，不必操心，而有的就得自食其力，先前對指令這一塊的封裝一直理解的不夠，故每次使用directive時抽象性都做得不好，往往移植性很差，而要將抽象做好，就不得不使用指令中的隔離作用域，而光有隔離作用域又不能做好前后文的通信問題，要解決通信的問題，就要使用指令中的綁定，正好最近要用，順便就整理了一些關于指令中的3種綁定策略，并談了一些自己的理解。

angularJs中指令scope隔離域綁定有3種策略：如

.directive("abc",function(){   return {     scope:{                  title:"@",              name:"=",              changeNum:"&"         } /* 出現了scope就表示這個指令的scope是獨立的，但如果要與外界聯系，就要使用綁定策略*//*使用@符號可將本地作用域的變量與DOM屬性的值進行綁定，即我們通過@得到title屬性的值*//*使用=符號可將本地作用域上的屬性與父級作用域上的屬性進行雙向綁定，即我們通過=得到name的引用。可以同值傳遞和引用傳遞的理解相結合*//*使用&符號可以對父級作用域進行綁定，以便在其中運行函數，簡單說就是綁定函數用的*/   }})

舉一個詳細的例子：

HTML：

<div ng-controller="test"><div>AngularJs指令的三種綁定策略</div><example title="titleExample" name="nameExample" send-message="parentSendMessage('example')"></example></div>

說明：example是自定義的指令，用以展示指令的三種綁定策略。

使用@來綁定title，以獲取DOM中的屬性值。

   directive:   myApp.directive("example",function(){    return {      restrict:"E",      scope:{        title:"@",       },      link:function($scope,element,attrs){        console.log($scope.title); ==> titleExample      }    }    })

說明：@綁定策略，可以將title值與父級作用域的值綁定，比如父級作用域有一個屬性是testTitle，我們想將指令中的title屬性的值與父級作用域中testTitle的值綁定，故我們可以在HTML將指令改寫成<example title={{testTitle}}></example>，這樣我們就可以在.directive中通過子作用域中的$scope.title獲取到父級作用域$scope.testTitle的值。

使用=來綁定name，以將子作用域與父作用域的屬性進行雙向綁定。

   directive:   myApp.directive("example",function(){    return {      restrict:"E",      scope:{        name:"=",      },      link:function($scope,element,attrs){        console.log($scope.name); ==> nameTest      }    }   })       //父級作用域的控制器   controller：   myApp.controller("test",function($scope){     $scope.nameExample = "nameTest"   })