CODEWITHSUNDEEP
angularjsangularjs-directive
sathyapulse
sathyapulse

Reputation: 429

How to make two way communication between isolated directives without watch or rootscope?

I have common directive with isolated scope which controls all the recording activities like start recording, stop recording and also it should call the respective callbacks in the directiveA and directiveB when the recording in started/completed.

How to make the communication between the directives for the above scenario?

I am searching this scenario in the web, but I couldn't find the solution. Can anyone help me please?

Two way Directive communication

Upvotes: 1

Views: 623

Answers (2)

sathyapulse
sathyapulse

Reputation: 429

I found new way of implementation. I created the below application which demonstrates the above scenario. Please correct me if I am doing wrong. 

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.commonControl = {};
});


app.directive('commondir', [
  '$timeout',
  function($timeout){
    return {
      restrict: 'EA',
      scope: {
        commonControl: '='
      },
      link: function(scope, element, attributes) {
        scope.recordControl = {
          start: function(testVar) {
            console.log('start');
            scope.recordControl.onStart(testVar);
            $timeout(function(){
              scope.recordControl.onStop(testVar);
            }, 2000);
            
          },
          stop: function(testVar) {
            console.log('stop');
            scope.recordControl.onStop(testVar);
          }
        };
        
        scope.commonControl.getRecordControl = function() {
          return scope.recordControl;
        }
        
      }  
    };
  }
]);



app.directive('directiveA', [
  function(){
    return {
      restrict: 'EA',
      scope: {
        recordControl: '=',
        testVar: '='
      },
      link: function(scope, element, attributes) {
        
      
        scope.recordControl.onStart = function(testVar) {
          console.log('onStart', testVar);
        };
        
        scope.recordControl.onStop = function(testVar) {
          console.log('onStop', testVar);
        };
        
        element.bind('click', function(){
          console.log(scope.recordControl);
          scope.recordControl.start(scope.testVar);
        });
        
      }  
    };
  }
]);


app.directive('directiveB', [
  function(){
    return {
      restrict: 'EA',
      scope: {
        recordControl: '=',
        testVar: '='
      },
      link: function(scope, element, attributes) {
        
      
        scope.recordControl.onStart = function(testVar) {
          console.log('onStart', testVar);
        };
        
        scope.recordControl.onStop = function(testVar) {
          console.log('onStop', testVar);
        };
        
        element.bind('click', function(){
          console.log(scope.recordControl);
          scope.recordControl.start(scope.testVar);
        });
        
      }  
    };
  }
]);
<!DOCTYPE html>
<html ng-app="stackOverflow">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js" ></script>

  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div commondir common-control="commonControl">Common</div>
    
    <div directive-a record-control="commonControl.getRecordControl()" test-var="'a'">Directive A</div>
    <div directive-a record-control="commonControl.getRecordControl()" test-var="'a1'">Directive A1</div>
    <div directive-b record-control="commonControl.getRecordControl()" test-var="'b'">Directive B</div>
    <div directive-b record-control="commonControl.getRecordControl()" test-var="'b1'">Directive B1</div>

  </body>

</html>

Upvotes: 1

Mikalai
Mikalai

Reputation: 1525

My suggestion to use eventemitter like angular service. You can easy inject it to another angular parts. You can create simple new one or reuse existing like here.

Upvotes: 0

Related Questions