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

本文實例講述了AngularJS中scope的綁定策略。分享給大家供大家參考，具體如下：

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

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

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

1. @

本地作用域屬性：使用@符號將本地作用域同DOM屬性的值進行綁定。指令內部作用域可以使用外部作用域的變量：

@ (or @attr)

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

<div ng-controller="nameController">
 <direct for-name="{{ Name }}"></direct>
<div>

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

2. =

與父scope中的屬性進行雙向綁定

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

<div ng-controller="nameController">
 <direct case="data[0]"></direct>
 <direct case="data[1]"></direct>
<div>

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

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

3. &

傳遞來自父scope中的函數、稍后調用

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

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com