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

通过隔离范围

1 个答案: