Question

我有一个独立范围的通用指令，它控制所有录制活动，如开始录制，停止录制，还应该在开始/完成录制时调用directiveA和directiveB中的相应回调。

如何在上述场景的指令之间进行通信？

我正在网上搜索这个场景，但我无法找到解决方案。有人可以帮帮我吗？

Two way Directive communication

Answer 1

我找到了新的实施方式。我创建了以下应用程序，演示了上述场景。如果我做错了，请纠正我。

＆＃13;

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);
        });
        
      }  
    };
  }
]);

＆＃13;

<!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>

＆＃13;

Answer 2

我建议使用像角度服务一样的eventemitter。您可以轻松地将其注入另一个角度部位。您可以创建简单的新帐户或重用现有的here。

如何在没有watch或rootscope的情况下在隔离指令之间进行双向通信？

2 个答案: