Home > Developer > Web Develop
The previous article spoke of the communication between the directive and the controller, but what about the communication between US Directive and directive?
When we use two directive nested, how to ensure that the child directive will not be replaced by the parent directive, and when the child directive need to use the parent directive controller a variable or method of the time
How to achieve the communication between the two directive.
Here we mainly talk about the two properties of Directive:
1.transclude
2.require
Html
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>Angular-directive3</title>6 <Scriptsrc= "Js/angularjs1.4/angular-1.4.6.mini.js"></Script>7 <styletype= "Text/css">8 #id1{9 width:200px;Ten Height:100px; One Border:1px solid #005599; A } - #id2{ - width:100px; the Height:50px; - margin:5px; - Border:1px dotted #cccccc; - } + </style> - </Head> + <BodyNg-app= "DEMODRT"> A at <DEEP-DRTForid= "Id1"> - <INNER-DRTForinnerid= "Id2"></INNER-DRT> - </DEEP-DRT> - - </Body> - </HTML>
Js
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 //Plus transclude property true after combining the ng-transclude directive in the template does not replace the child Directive,Ten //If a custom directive is nested without the transclude attribute, the child directive will be replaced by the template of the parent Directive One Transclude:true, A //If there are child directive to use the value of the controller in the parent directive, the definition of the variable and function is bound with this, $scope binding will only take effect at the current scope . - controller:[' $scope ', function ($scope) { - //This output is actually the Controller object the this.name = ' angular '; - this.version = ' 1.4.6 '; - }], - //template is used in conjunction with Ng-transclude, if Ng-transclude is placed in the template's parent, + //Then the value inside the template will be covered with a quilt directive, so we'll use a DOM and add ng-transclude to wrap the directive in the outer layer. -Template: '<DivID= "{{Forid}}">Deepdrt<DivNg-transclude></Div></Div>' + }; A }); at - demodrt.directive (' Innerdrt ', function () { - return { - Restrict: "AE", - Replace:true, - //require main function is to look for the parent directive, ' ^ ' means looking up, followed by the name of the parent directive, '? ' If you can't find it, you won't get an error. in //General ' ^? ' Two combined use when the parent directive is not found angular will not error - //Combined with require you can get the variables and methods of controller in parent directive by adding Recontroller to the link attribute of the child Directive to require: ' ^?DEEPDRT ', + scope: { - forinnerid: ' @ ' the }, * link:function (scope, element, attr, Recontroller) { $ Console.log (scope);Panax Notoginseng Console.log (attr); - //recontroller Gets the variables and functions bound in the parent controller the element.bind (' click ', Function (e) { + Console.log (e.target); A E.target.innertext = recontroller.name + '-' + recontroller.version; the }); + }, -Template: '<DivID= "{{Forinnerid}}">Innerdrt</Div>' $ } $});
Directive generating page structure
By combining the ng-transclude instruction in the template with Transclude:true, we can nest directive in the parent directive, and I mention it in the comments. If there is not a DOM package outside of Ng-transclude
Son directive words that Word directive will also be the Father Directive template replacement.
Require in the sub-directive: ' ^?DEEPDRT '; specific meanings have been explained in the comments. It is important to note that the variables defined in the controller in the parent directive are bound to the variable or method with this if it is to be used by the child directive, this refers to the Controller object. The Recontroller in the child directive is the Controller object, resulting in the variables and attributes defined in the parent directive.
There is so much communication between ANGULARJS directive, and it is wrong to hope that you will correct me. Thank you!
Communication between Directive and directive in ANGULARJS
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
