前言
我們想要實(shí)現(xiàn)這樣的效果：當(dāng)我們點(diǎn)擊標(biāo)題的時(shí)候展示下面的內(nèi)容，再點(diǎn)擊則收回去。
一、首先回顧一下有哪些綁定策略？
看這個(gè)實(shí)在是有點(diǎn)抽象了，我們來看具體的實(shí)例分析吧！
二、簡單的Demo實(shí)例
@綁定：傳遞一個(gè)字符串作為屬性的值。
比如 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:'@' //自動(dòng)綁定，傳遞的是字符串 }, template:"<div>{{flavor}}</div>", };});頁面中使用標(biāo)簽部分示例：
<div ng-controller="MyCtrl3"> <drink flavor="{{ctrlFlavor}}"></drink> </div>分析我們在drink指令中為什么能取得在父作用域中的值呢？原因就在于我們使用了@綁定策略，可以將ctrlFlavor賦值給flavor,這樣在模板中就能取到該值了。
=綁定：指定獲取屬性的類型為父作用域的屬性
myDirec.directive("drink2",function(){ return{ restrict:'AE', scope:{ flavor:'=' //自動(dòng)綁定 }, template:'<input type="text" ng-model="flavor"/>' };});頁面：
<div ng-controller="MyCtrl3"> <drink2 flavor="ctrlFlavor"></drink2> </div>
執(zhí)行的流程是這樣的：
① 指令被編譯的時(shí)候會(huì)掃描到template中的模型發(fā)現(xiàn)有一個(gè)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>
從結(jié)果上看，三個(gè)輸入框中的內(nèi)容互不影響，因?yàn)槎际切碌莫?dú)立作用域，能夠完成從視圖到模型的綁定。
三、Expander示例
首先看控制器代碼：
/*Expander示例*/myDirec.controller('SomeController',function($scope) { $scope.title = '點(diǎn)擊展開'; $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í)行的流程是這樣的：
① 指令被編譯的時(shí)候會(huì)掃描到template中的模型發(fā)現(xiàn)有一個(gè){{title}}，
② 查找scope中是否定義：通過=與父作用域綁定，方式是傳遞父作用域中的屬性;
我總是在這里犯糊涂，解釋下這個(gè)“方式是傳遞父作用域中的屬性”，這個(gè)在哪里用的呢？
<div ng-controller='SomeController'> <expander class='expander' expander-title='title'> {{text}} </expander> </div>看到?jīng)]，指令中的屬性expander-title='title',這不就是傳遞父作用域中的屬性嗎？
③ expander-title與父作用域中的title屬性綁定，找到它的值“點(diǎn)擊展開”；
④ 將title的值顯示在模板中。
注意：指令中的獨(dú)立作用域中的屬性title是為了給下面的模板使用 的，而title所對應(yīng)的值，要依據(jù)頁面中指令的使用傳人具體的父作用域中的屬性，完成屬性的綁定操作。
總之、我們可以利用angularjs為我們提供的數(shù)據(jù)綁定策略來實(shí)現(xiàn)從父作用域向指令中傳值，這個(gè)很有用哦！
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點(diǎn)
疑難解答
