AngularJS基于事件的通信通过隔离范围

Question

在AngularJS中,一个指令如何使用基于事件的通信($emit,$broadcast和$on)与另一个具有隔离范围的指令进行通信？我已经创建了两个指令,当从第二个指令中删除隔离范围时,第一个指令能够使用emit成功地与第二个指令进行通信.但是,当隔离范围添加回第二个时,通信会中断.

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

app.directive("firstDir", function() {
  return {
    restrict: 'E',
    controller: function($scope) {
      $scope.set = function() {
        $scope.$emit('MY_NEW_SEARCH', $scope.searchQuery);
      }       
    },
    template: '<input type="text" ng-model="searchQuery"><button ng-click="set()">Change Value</button>'
  };  
});

app.directive("secondDir", function() {
  return {
    restrict : 'E',
    scope: {},
    controller : function($scope) {    
      var _that = $scope;
      $scope.$on('MY_NEW_SEARCH', function(e, data) {
        _that.data = data;
      });
      $scope.data = 'init value';   
    }
  };  
});

我创建了一个Plunker来说明问题.您会注意到,如果您在第二个指令的指令定义对象中注释掉"scope"属性,则通信可以正常工作:您可以在第一个指令的输入框中键入一个字符串,按下第一个指令的按钮指令,并将字符串传递给第二个指令,该指令将其显示在视图上.(就目前而言,由于隔离范围问题,Plunker已损坏,请参阅app.js文件的第19行.)

http://plnkr.co/edit/AXUVX9zdJx1tApDhgH32

这是我的首要目标:我为第二个指令使用隔离范围的原因是将范围内部与范围外部区分开来.(我的项目中使用的实际"第二指令"比这个玩具示例复杂得多.这就是必要的.)我知道AngularJS提供了将外部范围映射到指令内部范围的机制.我很好奇这些机制中的任何一个对于映射基于事件的通信事件是否有用.

如果答案结果是隔离范围对于基于事件的通信是不可克服的,那么在我已经说明的情况下完成指令通信指令的最佳方法是什么,同时仍然实现我的目标？谢谢!

Answer 1

这来自两个问题.

1)第一个是由于两个指令在HTML中处于同一级别,因此不能$emit从一个范围到另一个范围的事件(除非它们具有相同的范围,这是第二个指令没有隔离范围时的情况) .

为了使第一个指令与第二个指令联系,你可以替换$scope.$emit(在范围层次结构中向上)$scope.$root.$broadcast(从根范围向下到它的所有子节点),或者只是$scope.$broadcast在你的情况下,因为第一个指令范围在事实根本范围!

2)第二个问题是你的第二个指令在被隔离时不会按原样处理范围转换,因此在DOM中更深层次定义的HTML将不会共享该指令隔离范围,而是上面的那个,它没有定义data.

将隔离范围传播到内部HTML的方法是在link函数中使用以下代码段:

link: function(scope, element, attrs, ctrl, transclude) {
  transclude(scope, function(clone) {
    element.append(clone);
  });
}

这是一个工作的Plnker,有两个修复:

http://plnkr.co/edit/I9Vmutal2gfqyLIU0iAe?p=preview