Пользовательская угловая директива вещания события, но не для вложенных детей?

Question

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

Я хочу широковещать событие, когда аккордеон открывается и закрывается, так что другие директивы могут его прослушивать (например, меню внутри панели гармоник может обнаруживать себя, когда аккордеон внутри него открыт).

Дело в том, что если внутри внешнего встроен внутренний гармоник, я не хочу, чтобы событие транслировалось на дочерние элементы внутреннего гармоника, потому что внутренний гармоник не транслировал событие open/close.

На всякий случай это не имеет смысла, иначе говоря, элемент внутри вложенного аккордеона должен уметь прослушивать широковещательную передачу открытого/закрытого аккордеона, в которой он находится, а не дальше по дереву DOM ,

Надеюсь, это простое решение.

Update: добавил демо здесь: http://jsfiddle.net/jonhobbs/xr1kLqba/

я ясно не поняли $ вещания и $ на должным образом в качестве демо событий в настоящее время не работает вообще, но это должно быть ясно, что я пытаясь сделать!

Редактировать: По-видимому, все ссылки на 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

На сегодняшний день самым простым подходом является использование require, как вы упомянули в комментариях.

Один из способов решения этой проблемы - зарегистрировать дочерние контроллеры (или даже их функции обратного вызова), а затем родитель может позвонить каждому ребенку вместо трансляции.

Следует обратить внимание на то, что вам нужно будет require: "?^^parent" - это означает, что требуется дополнительный и строго предновый селектор; для "^" Угловая вернула бы себя.

.directive("accordion", function(){ 
    return { 
    require: ["accordion", "?^^accordion"], 
    controller: function(){ 
     var children = []; 
     this.registerChild = function(childCtrl){ 
      children.push(childCtrl); 
     } 

     this.handleNotification = function(){ 
      // do something when notification arrives from parent 
     } 

     this.notify = function(){ 
      angular.forEach(children, function(child){ 
      child.handleNotification(); 
      }) 
     } 
    }, 
    link: function(scope, element, attrs, ctrls){ 
     var me = ctrls[0], parent = ctrls[1]; 

     if (parent){ 
     parent.registerChild(me); 
     } 
    } 
    } 
}) 

Answer 2

Вы можете добавить значение числа depth или аналогичных широковещательной передачи, которая определяет иерархическую глубину радиопередача была послана с. если прослушивание контроллера директив имеет значение depth1, оно может быть выполнено. Иначе это может просто игнорировать трансляцию.

Если неясно, я мог бы также добавить небольшой пример, просто дайте мне знать.

Answer 3

Yo're пытается работать с угловым контекстом внутри обратного вызова 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.