AngularJS中scope綁定策略的示例分析

這篇文章主要介紹AngularJS中scope綁定策略的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供唐山網(wǎng)站建設(shè)、唐山做網(wǎng)站、唐山網(wǎng)站設(shè)計、唐山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、唐山企業(yè)網(wǎng)站模板建站服務(wù)，10多年唐山做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

具體如下：

當(dāng)scope選項寫為scope:{ }這種形式的時候，就已經(jīng)為指令生成了隔離作用域，指令的模板就無法訪問外部作用域了：

具有隔離作用域的指令最主要的使用場景是創(chuàng)建可復(fù)用的組件，組件可以在未知上下文中使用，并且可以避免污染所處的外部作用域或不經(jīng)意地污染內(nèi)部作用域。

現(xiàn)在，我們來看看綁定策略的三種形式： @、= 、&。

1. @

本地作用域?qū)傩裕菏褂聾符號將本地作用域同DOM屬性的值進(jìn)行綁定。指令內(nèi)部作用域可以使用外部作用域的變量：

@ (or @attr)

把當(dāng)前的屬性作為字符串傳遞。你還可以綁定來自外層的scope的值，在屬性值中插入{{ }}即可。什么意思呢？說的簡單一點就是假設(shè)你在模板中有個雙花括號表達(dá)式，然后我們把表達(dá)式里的內(nèi)容和html中指令里特定名字的屬性綁定起來：

directive("direct",function(){
    return{
      restrict: 'A',
      template: '
指令中：{{ name }}
',
      scope:{
       name:'@forName'
      }
     }
 })
.controller("nameController",function($scope){
   $scope.Name="張三";
});

2. =

與父scope中的屬性進(jìn)行雙向綁定

@是針對字符串（準(zhǔn)確來說是表達(dá)式expression）而用，但=是針對某個對象的引用；

directive("direct",function(){
    return{
      restrict: 'ECMA',
      template: '
指令中：{{ case.name }}
',
      scope:{
       case:'='
      }
     }
 })
.controller("nameController",function($scope){
   $scope.data=[{name:"張三"},{name:"李四"}];
});

data是一個對象數(shù)組，里面包含了兩個對象，所以，我們分別把兩個對象傳遞給了case這個屬性，case屬性就把這個對象的引用傳遞給了模板中我們寫的{{ case.name }}中的case;而如果你在=后邊加上了自己定義的名字，那只要把html里case屬性換成那個名字就可以了。

3. &

傳遞來自父scope中的函數(shù)、稍后調(diào)用

它的含義是：對父級作用域進(jìn)行綁定，并將其中的屬性包裝成一個函數(shù)，注意任何類型的屬性都會被包裝成一個函數(shù)，比如一個單純的字符串，或是一個對象數(shù)組，或是一個函數(shù)方法。

以上是“AngularJS中scope綁定策略的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：AngularJS中scope綁定策略的示例分析
分享路徑：http://m.jiaotiyi.com/article/pcjohe.html