angularJS中directive與directive 之間的通訊

時間 2019-11-20

標籤 angularjs directive 之間通訊欄目 AngularJS 简体版

原文原文鏈接

上一篇講了directive與controller之間的通訊；可是咱們directive與directive之間的通訊呢？css

當咱們兩個directive嵌套使用的時候怎麼保證子directive不會被父directive替換覆蓋；及當子directive須要用到父directive中controller某個變量或者方法的時候html

怎麼實現兩個directive之間的通訊的。angularjs

這裏主要講directive的兩個屬性：app

1.transcludedom

2.require函數

htmlui

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>angular-directive3</title>
 6     <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
 7     <style type="text/css">
 8         #id1 {
 9             width: 200px;
10             height: 100px;
11             border: 1px solid #005599;
12         }
13         #id2 {
14             width: 100px;
15             height: 50px;
16             margin: 5px;
17             border: 1px dotted #cccccc;
18         }
19     </style>
20 </head>
21 <body ng-app="demoDrt">
22 
23 <deep-drt forid="id1">
24     <inner-drt forinnerid="id2"></inner-drt>
25 </deep-drt>
26 
27 </body>
28 </html>

jsthis

 1 var demoDrt = angular.module('demoDrt', []);
 2     demoDrt.directive('deepDrt', function() {
 3         return {
 4             restrict:'AE',
 5             replace:true,
 6             scope : {
 7                 forid : '@'
 8             },
 9             //加上transclude屬性true以後在template中結合ng-transclude指令就不會替換子directive，
10             // 若是嵌套有自定義指令而沒加transclude屬性的話子directive會被父directive的template替換掉
11             transclude:true,
12             //若是有子directive要使用父directive中controller的值的話變量和函數的定義則要使用this來綁定，$scope綁定的話只會在當前做用域生效
13             controller:['$scope', function($scope) {
14                 //這個this輸出的其實就是controller對象
15                 this.name = 'angular';
16                 this.version = '1.4.6';
17             }],
18             //template 上結合ng-transclude使用，若是ng-transclude放在template的父級的話，
19             // 那麼template裏面的值會被子directive覆蓋，因此咱們要用一個dom並加上ng-transclude來在外層包裹子directive。
20             template:'<div id="{{forid}}">deepDrt<div ng-transclude></div></div>'
21         };
22     });
23 
24     demoDrt.directive('innerDrt', function() {
25        return {
26            restrict:"AE",
27            replace:true,
28            //require主要做用是尋找父directive,'^'表示向上尋找，後面加上父directive的名字，'?'表示若是找不到的話則不會報錯,
29            // 通常'^?'兩個結合使用當找不到父directive的時候angular不會報錯
30            //結合了require 則在子directive的link屬性中加上reController，則能夠獲取父directive中controller的變量和方法
31            require: '^?deepDrt',
32            scope : {
33                forinnerid : '@'
34            },
35            link : function(scope, element, attr, reController) {
36                console.log(scope);
37                console.log(attr);
38                //reController獲得了父controller中綁定的變量和函數
39                element.bind('click', function(e) {
40                   console.log(e.target);
41                    e.target.innerText = reController.name + '-' + reController.version;
42                });
43            },
44            template : '<div id="{{forinnerid}}">innerDrt</div>'
45        }
46     });

directive生成頁面結構spa

經過transclude:true同時在template中結合ng-transclude指令咱們能把子directive嵌套在父directive中；而我在註釋中也提到了，若是ng-transclude外沒有一個dom包裹rest

子directive的話那字directive也是會被父directive的template替換的。

在子directive中require:'^?deepDrt'；具體含義在註釋中已經說明。值得注意的是父directive中的controller中定義的變量若是要給子directive使用的話要用this來綁定變量或者方法，this指的就是controller這個對象。子directive中reController獲得的就是這個controller對象，從而獲得父directive中this定義的變量和屬性。

關於angularJS directive之間的通訊就這麼多;不對之處但願你們指正。謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。