當我們在angularJS中自定義了directive之后需要和controller進行通訊的時候，是怎么樣進行通訊呢？
這里介紹3種angular自定義directive與controller通信的指令。
1.指令作用域中的"@"
作用：把當前屬性作為字符串傳遞實現指令與html頁面元素關聯。
1 <!DOCTYPE html> 2 <html ng-app="demoapp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>angular-directive與controller通信</title> 6 7 <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script> 8 </head> 9 <body> 10 <div ng-controller="democtrl2"> 11 <!--給tag2賦值的時候要使用表達式--> 12 <mytag tag2="{{attrd}}"></mytag> 13 </div> 14 15 </body> 16 </html>
js:
1 <script> 2 var demoapp = angular.module('demoapp', []); 3 4 demoapp.controller('democtrl2', ['$scope', function($scope) { 5 6 $scope.attrd = 'hello'; 7 8 }]); 9 10 //scope中tag2屬性值為"@",將tag2作為字符串傳遞與頁面中html實現關聯 11 demoapp.directive('mytag', function() { 12 return { 13 restrict:"AE", 14 scope:{ 15 tag2:'@' 16 }, 17 template:"<div>{{tag2}}</div>" 18 }; 19 }); 20 21 </script>
這里首先在html頁面中定義了<mytag></mytag>標簽，然后定義tag2屬性，然后將在controller中定義的attrd屬性賦值給標簽中的tag2屬性。
然后在js中定義了一個mytag的一個指令，在scope中tag2屬性值為"@",這樣的話tag2的值就是頁面中tag2={{attrd}}中的值，而attrd=“hello”。所以tag2=“hello”。其主要的作用是將<mytag></mytag>標簽替換為template中的<div>{{tag2}}</div>。
其實等價於：
1 link:function(scope, element, attrs) {//scope為父controller中的scope，element為mytag，attrs為mytag中的屬性
2 scope.tag2 = attrs.tag2; 3 }
其主要的流程是：
1.通過@實現指令與html頁面元素進行關聯。
2.在控制器中又實現了與頁面的關聯。
3.通過html實現了控制器和指令之間的聯系。
2.指令作用域中的"="
作用：表示與父scope中的屬性進行雙向數據綁定
1 <!DOCTYPE html> 2 <html ng-app="demoapp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>angular-directive與controller通信</title> 6 7 <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script> 8 </head> 9 <body> 10 <div ng-controller="democtrl2"> 11 Ctrl: 12 <input type="text" ng-model="attrd2"/> 13 <br/> 14 Directive: 15 <mytag2 tag3="attrd2"></mytag2> 16 </div> 17 </body> 18 </html>
js：
1 var demoapp = angular.module('demoapp', []); 2 3 demoapp.controller('democtrl2', ['$scope', function($scope) { 4 5 $scope.attrd2 = 'hello2'; 6 7 }]); 8 demoapp.directive('mytag2', function() { 9 return { 10 restrict:"AE", 11 scope:{ 12 tag3:"=" 13 }, 14 template:"<input type='text' ng-model='tag3' />" 15 }; 16 });
具體流程：
1.在html中定義了一個輸入框ng-model綁定了controller中的attrd2,同時定義<mytag2></mytag2>標簽，然后將controller中的attrd2賦值給tag3。
2.在指令中scope對象中tag3:"=",則表示與父scope中的屬性進行雙向數據綁定，具體綁定哪個mytag2標簽中已經指定了。然后替換為tamplate中的標簽顯示。
3.通過"="實現了指定中的屬性與父scope中的屬性進行雙向數據綁定，從而當改變一個值時達到互相影響對方的作用。
3.指令作用域中的"&"
作用：表示與父scope中的函數進行傳遞，稍后進行調用。
1 <!DOCTYPE html> 2 <html ng-app="demoapp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>angular-directive與controller通信</title> 6 7 <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script> 8 </head> 9 <body> 10 <div ng-controller="democtrl2"> 11 <mytag3 tagfn="attrd_fn(name)"></mytag3> 12 13 <span>{{fruit}}</span> 14 15 </div> 16 </body> 17 </html>
js:
1 var demoapp = angular.module('demoapp', []); 2 3 demoapp.controller('democtrl2', ['$scope', function($scope) { 4 5 //方法傳入參數的名稱和下面自定義的directive中對象的屬性名稱要一致 6 $scope.attrd_fn = function(name) { 7 $scope.fruit = name; 8 } 9 10 }]); 11 12 demoapp.directive('mytag3', function() { 13 return { 14 restrict:"AE", 15 scope:{ 16 tagfn:"&" //屬性不能有下划線 17 }, 18 template:"<input type='text' ng-model='fruitname'/><button ng-click='tagfn({name:fruitname})'>水果名字</button>" //對象傳入的屬性名稱和controller中方法傳入的參數名稱一致 19 20 }; 21 });
具體流程：
1.頁面中定義了<mytag3></mytag3>標簽，標簽中tagfn屬性等於controller中定義的attrd_fn函數。
2.自定義mytag3指令中tagfn:"&"則表示directive與controller之間主要進行的是函數的傳遞。同時將頁面上的標簽替換為template中的內容。
3.通過頁面中tagfn="attrd_fn(name)"，template中ng-click時觸發的tagfn函數來自controller中的attrd_fn;同時tagfn函數傳入的是一個對象，對象的屬性名字要和controller中attrd_fn函數中參數名字一致。
為達到簡潔的效果我將頁面的顯示結果放到了一張圖片展示，如下：
