Question

我在Angular中创建了一个可以嵌套的手风琴指令，因此手风琴可以在其中包含儿童手风琴。

我希望在手风琴打开和关闭时广播一个事件，以便其他指令可以听取它（例如，当手风琴师在其中打开时，手风琴面板内的菜单可能会显示出来。）

问题在于，如果在外部的内部有一个嵌套的内部手风琴，我不希望该事件被广播到内部手风琴的儿童元素，因为内部手风琴没有广播开放/关闭事件。

如果没有意义，换句话说，嵌套的手风琴中的元素应该能够听到它所在的手风琴播放的开/关事件，而不是DOM树中的那个。

希望有一个简单的解决方案。

更新：在此处添加了演示：http://jsfiddle.net/jonhobbs/xr1kLqba/

我显然无法理解$ broadcast和$ on，因为当前的演示活动根本不起作用，但我应该清楚我要做的事情！

编辑：显然所有指向jsfiddle的链接都必须附带代码，所以这里有一些。

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

app.controller('MainCtrl', function($scope) {
  $scope.mainMenuOpen = true;
})

.directive('myPanel', function() {
  return {
    restrict: 'EA',
    scope: {
      isOpen: '=?'
    },
    link: function($scope, $element, $attrs) {  
      $element.find('> BUTTON').bind('click', function() {

        $scope.isOpen = !$scope.isOpen;
        if ($scope.isOpen) {
          $scope.$broadcast('panelOpened');
        }
      });
    }
  };
})

.directive('reactToPanelOpenClose', function() {
  return {
    restrict: 'EA',
    scope: {},
    link: function($scope, $element, $attrs) {
      $scope.$on('panelOpened', function() {

        alert("clicked");

        $element.css({ 'background-color': 'red' });
      });
    }
  };
});

Answer 1

你正在尝试使用jQuery回调中的角度上下文，这样就行不通了。解决问题的最简单方法是以下代码段：

angular.$externalBroadcast = function (element, event, data) {
    var scope = element.scope();
    scope.$apply(function () {
        scope.$broadcast(event, data);
    });
};

并在面板指令的链接功能中应用此功能：

$scope.isOpen = !$scope.isOpen;                
if($scope.isOpen){
    angular.$externalBroadcast($element, 'panelOpened');
}

查看此修改后的Fiddle。

Answer 2

您可以为广播添加一个数字值depth或类似值，用于定义广播发送的层次深度。如果指令控制器监听，depth的{{1}}更高，则可以执行。否则它可能会忽略广播。

如果不清楚，我还可以添加一个小例子，让我知道。

自定义角度指令广播事件而不是嵌套子项？

2 个答案: