AngularJS: Directive to Directive communication

Shankar Raman 10:29
Hi Guys,

In the code below you can find how directive can communicate with other directive. To do this you have to use "require" option in directive.

index.html
<html ng-app="simpleDirective">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Controller">
  <my-customer custom info="customer"></my-customer>
</div>
</body>
</html>

app.js

var app = angular.module('simpleDirective', []);

app.controller('Controller', ['$scope', function($scope) {
  $scope.customer = [{
    name: 'Alex',
    quantity: '70'
  },{
    name: 'Alisha',
    quantity: '100'
  },{
    name: 'Shankar',
    quantity: '50'
  }];
}]);

app.directive('myCustomer', function() {
  return {
   restrict:"E",
   scope:{
    userInfo:"=info"
   },
   controller:function($scope){
    this.displayUsers = function(){
     console.log($scope.userInfo);
    };
   },
   templateUrl: "table.html"
    }
});

app.directive("custom", function(){
 return {
  require:"myCustomer",
  link:function(scope, element, attrs, ctrl){
   ctrl.displayUsers();
  }
 }
});

table.html

<table ng-repeat="obj in userInfo">
 <tr>
  <td>
   {{obj.name}}
  </td>
  <td>
   {{obj.quantity}}
  </td>
 </tr>
</table>











Good Day :)

Post a Comment

2 Comments

  1. mayur12 October 2015 at 23:33

    Hi Sir, it would be better if you attach result's screen shots also with above code :)

    ReplyDelete