快捷導(dǎo)航

詳解angularJs指令的3種綁定策略

更新時(shí)間：2017年04月13日 14:09:33 作者：小羊快跑_yq

本篇文章主要介紹了angularJs指令的3種綁定策略，詳細(xì)的介紹了@=&的用法和實(shí)例，有興趣的可以了解一下。

今天，我來談?wù)刟ngularJs指令的3種綁定策略。

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

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

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

舉一個(gè)詳細(xì)的例子：

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值與父級(jí)作用域的值綁定，比如父級(jí)作用域有一個(gè)屬性是testTitle，我們想將指令中的title屬性的值與父級(jí)作用域中testTitle的值綁定，故我們可以在HTML將指令改寫成<example title={{testTitle}}></example>，這樣我們就可以在.directive中通過子作用域中的$scope.title獲取到父級(jí)作用域$scope.testTitle的值。

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

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

說明：在實(shí)際生產(chǎn)中，這一綁定策略十分有效，譬如說，假定我在指令中要返回一個(gè)對(duì)象給父級(jí)作用域，這時(shí)通過“@"這一"值傳遞"方法已經(jīng)不能滿足需求了，此時(shí)就應(yīng)該考慮"="這一"引用傳遞"，因?yàn)橥ㄟ^name="nameExample"這一聲明，就將子作用域的$scope.name與父作用域的$scope.nameExample綁定在一起，可以認(rèn)為他們指向同一地址，不論修改哪個(gè)都會(huì)影響對(duì)方。

使用&來綁定sendMessage ，以將子作用域與父作用域的方法進(jìn)行綁定。

   directive:
   myApp.directive("example",function(){
    return {
      restrict:"E",
      scope:{
        sendMessage:"&",
      },
      link:function($scope,element,attrs){
      }
    }
   })

  //父級(jí)作用域的控制器
   controller：
   myApp.controller("test",function($scope){
     $scope.parentSendMessage = function(content){
        alert(content);
     }
   })

說明：可以看到"&"綁定就是讓子作用域可以使用父級(jí)作用域中的方法，這樣就可以利用父級(jí)作用域$scope.parentSendMessage ()中的一些數(shù)據(jù)進(jìn)行運(yùn)算，并將結(jié)果返回給子作用域$scope.sendMessage() 。

希望這篇淺見能對(duì)你了解指令隔離域的3種綁定策略有些許幫助！也希望大家多多支持腳本之家。

您可能感興趣的文章: