Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Communication between Directives in AngularJS with Example

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.38k
    Comment on it

    Communication between Directives can be done the following ways:-
       1.Using require and directive controllers to communicate and share functionality
       2.EVENTING -more defined way of communication.
       3.using scope object- but this is not the appropriate way to do it since it has some limitations and certain communication troubles.

    In this part we’ll go through the 1st point that is using require and directive controllers.

    1.Require and Link properties are used when using directive controllers for communication.Directive controllers comes into the picture when directives share a hierarchical relationship. API is passed on a controller and the other directive uses its link function to consume it. Best practice is to use controller to expose an API to other. To access the controller functionality of one directive,either you need to declare the requiring directive on the same element or be a child of the directive instantiating the controller.
    For example:-
    This is the basic example to let you know the flow.

    var exampleapp = angular.module(exampleapp", []);
    exampleapp.directive(firstDirective, function() {
    
    //Creating One Directive and defining a controller 
      return {                                                             
        controller: function() {
          this.print = function(message) {
            console.log(message);
          };
        }
      };
    });
    
    // second directive 
    app.directive(secondDirective", function() {                                    
      return { 
    
    //require property that tells it requires the firstDirectives controller functionality 
        require: "firstDirective", 
    
    // link function allow to access to the firstDirectives functionality through injecting its controller instance ,i.e,   													firstDirectiveController       
        link: function($scope, $elem, $attrs, firstDirectiveController) {
    	firstDirectiveController.print(This is an example.);
        }
      };
    });

     

    In HTML :-

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
      <meta charset="utf-8">
      <title>Directives Communication</title>
    </head>
    <body ng-app="exampleapp">
    
    // declare the requiring directive(secondDirective) on the same element
      <div first-directive second-directive></div> 
    </body>
    </html>

     Accessing a directive on a parent element.
    The same above example can be modified if you need to Access a directive on a parent element.
    For this you would need ^ character to refer the parent(required) controller.^character will look for the required directive among parent elements.
     

    Example:-

    var exampleapp = angular.module(exampleapp", []);
    exampleapp.directive(firstDirective, function() {
    
    //Creating One Directive and defining a controller 
      return {                                                             
        controller: function() {
          this.print = function(message) {
            console.log(message);
          };
        }
      };
    });
    
     // second directive 
    app.directive(secondDirective", function() { 
      return { 
    
    //require property that tells it requires the parent firstDirectives controller functionality
        require: ^firstDirective", 
    
    // link function allow to access to the parent Directives functionality through injecting its controller instance ,i.e,   													firstDirectiveController                                         
        link: function($scope, $elem, $attrs, firstDirectiveController) {
    	firstDirectiveController.print(This is an example.);
        }
      };
    });

    In HTML :-

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
      <meta charset="utf-8">
      <title>Directives Communication</title>
    </head>
    <body ng-app="exampleapp">
      <div first-directive >
    <div second-directive ></div>                        // declare the child directive(secondDirective)
    </body>
    </html>

     

    I will explain the remaining topics in my next part Communication between Directives in Angular JS- Part2" and it includes

    1. EVENTING - more defined way of communication.
    2. Using scope object

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: