My directive includes a menu toggle button and various nested directives with their own menus.
The outer directive has an isolated scope, while the inner directive has no specified scope.
I am trying to figure out how to show/hide the menu in the inner directive when the menu toggle button in the outer directive is clicked.
What is the best way to communicate the toggle value change from the outer directive to the inner directive?
I have attempted broadcasting the change in the outer directive and listening for it in the inner directive, but it does not seem to be working.
I also tried requiring the outer directive in the inner directive, where I can see the toggle value, but I can't find a way to watch it for changes.
Here is the link function from the outer directive:
link: function($scope, $element, $attrs){
var menuCollapsed = true;
$scope.toggleMenu = function(){
menuCollapsed = !menuCollapsed;
console.log("ToggleMenu",menuCollapsed);
$scope.$broadcast('menuCollapsed', menuCollapsed);
};
}
And the inner directive includes this:
link: function($scope, $element, $attrs, widgetCtrl){
$scope.$on('menuCollapsed', function(event, args){
console.log('menuCollapsed', event, args);
});
The log in the outer directive is displayed, but not in the inner directive.