Как сделать двустороннюю связь между изолированными директивами без часов или корнеплодов?

У меня есть общая директива с изолированной областью действия, которая контролирует все действия записи, такие как начало записи, прекращение записи, а также вызов соответствующих обратных вызовов в директиве A и директиве B при записи/запуске записи.Как сделать двустороннюю связь между изолированными директивами без часов или корнеплодов?

Как установить связь между директивами для вышеуказанного сценария?

Я ищу этот сценарий в сети, но я не смог найти решение. Кто-нибудь может мне помочь?

Two way Directive communication

источник

2015-06-24 Sathiyamoorthy

У меня тоже есть один и тот же вопрос? Есть ли решение для этого ?? –

Мое предложение использовать EventEmitter как угловой службы. Вы можете легко впрыснуть его в другие угловые детали. Вы можете создать простой новый или повторно использовать существующий, как here.

источник

2015-06-24 09:02:01 Mikalai

Мне нужно различать каждую директиву, директива А и директива В оба будут использовать общую директиву. Когда я излучаю событие из общей директивы, он должен вызвать соответствующий обратный вызов в директиве A /. B. Так что это не поможет – Sathiyamoorthy

Я нашел новый способ реализации. Я создал приложение ниже, которое демонстрирует вышеприведенный сценарий. Пожалуйста, поправьте меня, если я ошибаюсь.

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>

источник

2015-06-24 15:55:50 Sathiyamoorthy

Как сделать двустороннюю связь между изолированными директивами без часов или корнеплодов?

ответ

Смежные вопросы