We have discussed about a series of tutorials on custom directives and isolate scope in the previous posts. Sometimes you may want to build a component that is built from a combination of directives. In this post, we are going to discuss this concept and the communication between the nested directives. There are many ways to communicate between directives but in this post, we are going to discuss about the communication that uses controller as an API.
AngularJS Nested Directives
You can create nested directives using the following syntax:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var app = angular.module('moduleName', []); app.directive("First", function() { return { //code goes here }; }); app.directive("Second", function() { return { //code goes here }; }); app.directive("third", function() { return { //code goes here }; }); |
You can also use the following syntax to create the same. In this case we are not replicating the variable and use a dot(.) operator.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var app = angular.module('moduleName', []); app.directive("First", function() { return { //code goes here }; }) .directive("Second", function() { return { //code goes here }; }) .directive("Third", function() { return { //code goes here }; }) |
AngularJS Directive Communication
Let’s discuss this concept with the following example. In this post, we are going to create three directives shape , triangle and circle
-
- The
shapedirective defines a controller with two functions to push values in to the shapes array. - The controller will act as an API for other directives which contains the require property.
- The link function is used to alert the contents in the shapes array when the user clicks on the element. We use jQuery’s bind() method which attaches click event.
- Then we create directivesÂ
triangleandcirclewhich contains a link function that calls the method in the shape’s directive controller. You can pass the controller as the fourth parameter. We use the name shapeCtrl in this example. You can choose any name.
- The
|
1 2 3 4 5 |
link: function (scope, element, attrs, shapeCtrl) { shapeCtrl.triangle(); } |
- You may have noticed this line of code in the example,
require: '^shape'. This line is responsible for the communication between the directives. The^prefix means that the directive searches for the controller on its parents. - Best Practice: use
controllerwhen you want to expose an API to other directives. Otherwise, uselink.
Communication Between Directives Example
The following section shows the complete code for the example, which we have explained in this post.
We have defined our custom directives and controller in this script file( app.js).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
var app = angular.module('mainApp', []); app.directive("shape", function() { return { restrict: "E", scope:{ message:"@" }, controller: function($scope) { $scope.shapes = []; this.triangle = function() { $scope.shapes.push("Triangle"); }; this.circle = function() { $scope.shapes.push("Circle"); }; }, link: function(scope, element){ element.bind("click", function() { alert(scope.shapes); }); }, template:'<button style="color:green">{{message}}</button> <br><br>' }; }); app.directive("triangle", function() { return { require: '^shape', link: function (scope, element, attrs, shapeCtrl) { shapeCtrl.triangle(); } }; }); app.directive("circle", function() { return { require: '^shape', link: function (scope, element, attrs, shapeCtrl) { shapeCtrl.circle(); } }; }); |
This is the HTML page we are using in this example to demonstrate the communication between directives.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>AngularJS Directive Communication/title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body> <div ng-app="mainApp"> <div> <shape triangle circle message=" Click me to alert all Shapes"></shape> <shape triangle message=" Click me to alert Triangle"></shape> <shape circle message=" Click me to alert Circle"></shape> </div> </div> </body> </html> |
You will see the following output on your browser.
That’s all for now and you will see more angular features in the coming posts.