淺談angularjs中指令的三種繫結策略
阿新 • • 發佈:2019-02-19
在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指令中的三種繫結策略!