今天，我來談談angularJs指令的3種綁定策略。
公司最近大量使用angularJs做單頁面應用，就免不了使用angularJs的一些組件，而有的組件網上有現(xiàn)成的，不必操心，而有的就得自食其力，先前對指令這一塊的封裝一直理解的不夠，故每次使用directive時抽象性都做得不好，往往移植性很差，而要將抽象做好，就不得不使用指令中的隔離作用域，而光有隔離作用域又不能做好前后文的通信問題，要解決通信的問題，就要使用指令中的綁定，正好最近要用，順便就整理了一些關于指令中的3種綁定策略，并談了一些自己的理解。
angularJs中指令scope隔離域綁定有3種策略：如
.directive("abc",function(){ return { scope:{ title:"@", name:"=", changeNum:"&" } /* 出現(xiàn)了scope就表示這個指令的scope是獨立的，但如果要與外界聯(lián)系，就要使用綁定策略*//*使用@符號可將本地作用域的變量與DOM屬性的值進行綁定，即我們通過@得到title屬性的值*//*使用=符號可將本地作用域上的屬性與父級作用域上的屬性進行雙向綁定，即我們通過=得到name的引用。可以同值傳遞和引用傳遞的理解相結合*//*使用&符號可以對父級作用域進行綁定，以便在其中運行函數(shù)，簡單說就是綁定函數(shù)用的*/ }})舉一個詳細的例子：
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" })說明：在實際生產中，這一綁定策略十分有效，譬如說，假定我在指令中要返回一個對象給父級作用域，這時通過“@"這一"值傳遞"方法已經不能滿足需求了，此時就應該考慮"="這一"引用傳遞"，因為通過name="nameExample"這一聲明，就將子作用域的$scope.name與父作用域的$scope.nameExample綁定在一起，可以認為他們指向同一地址，不論修改哪個都會影響對方。
使用&來綁定sendMessage ，以將子作用域與父作用域的方法進行綁定。
directive: myApp.directive("example",function(){ return { restrict:"E", scope:{ sendMessage:"&", }, link:function($scope,element,attrs){ } } }) //父級作用域的控制器 controller： myApp.controller("test",function($scope){ $scope.parentSendMessage = function(content){ alert(content); } })說明：可以看到"&"綁定就是讓子作用域可以使用父級作用域中的方法，這樣就可以利用父級作用域$scope.parentSendMessage ()中的一些數(shù)據(jù)進行運算，并將結果返回給子作用域$scope.sendMessage() 。
希望這篇淺見能對你了解指令隔離域的3種綁定策略有些許幫助！也希望大家多多支持武林網。
新聞熱點
疑難解答
