Angularjs中三種數(shù)據(jù)的綁定策略(“@”，“=”，“&”)
前言
我們想要實現(xiàn)這樣的效果：當我們點擊標題的時候展示下面的內(nèi)容，再點擊則收回去。
一、首先回顧一下有哪些綁定策略？
看這個實在是有點抽象了，我們來看具體的實例分析吧！
二、簡單的Demo實例
@綁定：傳遞一個字符串作為屬性的值。
比如 str : ‘@string'
控制器中代碼部分示例：
myDirec.controller('MyCtrl3',['$scope',function($scope){
$scope.ctrlFlavor="雞尾酒";
$scope.sayHello=function(name){
alert("Hello "+name);
};
}]);
myDirec.directive("drink",function(){
return{
restrict:'AE',
scope:{
flavor:'@' //自動綁定，傳遞的是字符串
},
template:"<div>{{flavor}}</div>",
};
});
頁面中使用標簽部分示例：
<div ng-controller="MyCtrl3">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
分析我們在drink指令中為什么能取得在父作用域中的值呢？原因就在于我們使用了@綁定策略，可以將ctrlFlavor賦值給flavor,這樣在模板中就能取到該值了。
=綁定：指定獲取屬性的類型為父作用域的屬性
myDirec.directive("drink2",function(){
return{
restrict:'AE',
scope:{
flavor:'=' //自動綁定
},
template:'<input type="text" ng-model="flavor"/>'
};
});
頁面：
<div ng-controller="MyCtrl3"> <drink2 flavor="ctrlFlavor"></drink2> </div>
執(zhí)行的流程是這樣的：
?、?指令被編譯的時候會掃描到template中的模型發(fā)現(xiàn)有一個flavor，
?、?查找scope中是否定義：通過=與父作用域綁定，方式是傳遞父作用域中的屬性ctrlFlavor；
?、?flavor與父作用域中的ctrlFlavor屬性綁定，找到它的值“雞尾酒”；
?、?將model的值顯示在模板中。
&綁定：傳遞的是父作用域中的函數(shù)
控制器部分：
myDirec.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button ng-click="greet({name:userName})">問候一下</button><br/>'
};
});
頁面部分：
<div ng-controller="MyCtrl3"> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div>
從結果上看，三個輸入框中的內(nèi)容互不影響，因為都是新的獨立作用域，能夠完成從視圖到模型的綁定。
三、Expander示例
首先看控制器代碼：
/*Expander示例*/
myDirec.controller('SomeController',function($scope) {
$scope.title = '點擊展開';
$scope.text = '這里是內(nèi)部的顯示的內(nèi)容';
});
myDirec.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
scope : {
title : '=expanderTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs) {
scope.showMe = false;
scope.toggle = function() {
scope.showMe = !scope.showMe;
};
}
};
});
再看頁面部分：
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'> {{text}} </expander>
</div>
執(zhí)行的流程是這樣的：
① 指令被編譯的時候會掃描到template中的模型發(fā)現(xiàn)有一個{{title}}，
?、?查找scope中是否定義：通過=與父作用域綁定，方式是傳遞父作用域中的屬性;
我總是在這里犯糊涂，解釋下這個“方式是傳遞父作用域中的屬性”，這個在哪里用的呢？
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'> {{text}} </expander>
</div>
看到?jīng)]，指令中的屬性expander-title='title',這不就是傳遞父作用域中的屬性嗎？
?、?expander-title與父作用域中的title屬性綁定，找到它的值“點擊展開”；
④ 將title的值顯示在模板中。
注意：指令中的獨立作用域中的屬性title是為了給下面的模板使用 的，而title所對應的值，要依據(jù)頁面中指令的使用傳人具體的父作用域中的屬性，完成屬性的綁定操作。
總之、我們可以利用angularjs為我們提供的數(shù)據(jù)綁定策略來實現(xiàn)從父作用域向指令中傳值，這個很有用哦！
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
AngularJS 是一個 JavaScript 框架，它可以通過 <script> 標簽添加到 HTML 頁面。這篇文章主要介紹了AngularJs自定義服務之實現(xiàn)簽名和加密的相關資料,需要的朋友可以參考下2016-08-08
AngularJS中控制器函數(shù)的定義與使用方法示例
這篇文章主要介紹了AngularJS中控制器函數(shù)的定義與使用方法,結合具體實例形式分析了AngularJS控制器函數(shù)的定義、綁定及相關使用技巧,需要的朋友可以參考下2017-10-10
AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
這篇文章主要介紹了AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結合具體實例形式分析了AngularJS自定義指令的實現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下2017-06-06
Angular項目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關于Angular項目中$scope.$apply()方法使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angularjs具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。2017-07-07
Angular.js?實現(xiàn)帶手柄自由調(diào)整頁面大小的功能
這篇文章主要介紹了Angular.js?實現(xiàn)帶手柄自由調(diào)整頁面大小的功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-12-12
這篇文章主要介紹了AngularJS實現(xiàn)全選反選功能，這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定，對angularjs實現(xiàn)全選反選相關知識感興趣的朋友一起學習吧2015-12-12
這篇文章主要介紹了js常用正則表達式集錦，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
angularjs指令中的compile與link函數(shù)詳解
這篇文章主要介紹了angularjs指令中的compile與link函數(shù)詳解,本文同時訴大家complie,pre-link,post-link的用法與區(qū)別等內(nèi)容,需要的朋友可以參考下2014-12-12
本文主要介紹AngularJS 路由與多視圖詳解，這里整理了相關資料及示例代碼，詳細說明了在開發(fā)過程中如何應用，有興趣的朋友可以看下2016-08-08
angularJs中ng-model-options設置數(shù)據(jù)同步的方法
今天小編就為大家分享一篇angularJs中ng-model-options設置數(shù)據(jù)同步的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09