標籤：dir 底線 運算式 聯絡 attr pre src mode 分享
當我們在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函數中參數名字一致。
為達到簡潔的效果我將頁面的顯示結果放到了一張圖片展示，如下：
angularJS中directive與controller之間的通訊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
