Multiple directives on same page execute all at once - angularjs

Question

I've built a directive to create a toggle menu and I have problem with it when using the same diretive multiple times on the same page.
This is the directive:
function menuTrigger($document) {
return {
restrict: 'E',
scope: true,
link: function(scope, element, attrs) {
var
menuOpen = false,
elButton = angular.element(document.querySelectorAll(".menu-button")),
elContent = angular.element(document.querySelectorAll(".menu-content")),
elClose = angular.element(document.querySelectorAll("[menu-close]"));
var
pos = attrs.pos,
style;
if (pos == 'tl') {
style = {top: '0', left: '0', 'transform-origin': 'top left'}
} else if (pos == 'tr') {
style = {top: '0', right: '0', 'transform-origin': 'top right'}
} else if (pos == 'bl') {
style = {bottom: '0', left: '0', 'transform-origin': 'bottom left'}
} else if (pos == 'br') {
style = {bottom: '0', right: '0', 'transform-origin': 'bottom right'}
};
element.bind('click', function(e) {
e.stopPropagation();
openMenu();
});
elClose.bind('click', function(e) {
e.stopPropagation();
closeMenu();
});
$document.on('click', function () {
if (menuOpen == true) {
closeMenu();
};
});
function openMenu() {
menuOpen = true;
elContent.removeClass('menu-hide');
elContent.css(style);
setTimeout(function(){
elContent.addClass('menu-open');
}, 100);
};
function closeMenu() {
menuOpen = false;
elContent.removeClass('menu-open');
setTimeout(function(){
elContent.addClass('menu-hide');
elContent.removeAttr('style');
}, 400);
};
}
};
}
So, for example, if I'm using 1 menu on a main view, let's say the top navbar and then in a sub view I have other menu to control a selection, when I click on one menu, both of them will open.
How can i solve this issue?

Answer 1

As requested an example on how to require parent directive controllers. That should enable you to use less jQuery style code.
myModule.directive('myParentDirective', function(){
return {
controller: function(){
var vm = this;
vm.foo = 'bar';
}
};
});
myModule.directive('myChildDirective', function(){
return {
require: 'myParentDirective',
link: function(scope, elem, attrs, parentController){
console.log(parentController.foo); // equals 'bar'
}
};
});
<my-parent-directive>
<my-child-directive></my-child-directive
</my-parent-directive>

Answer 2

You're binding multiple times to multiple elements on your page:
// This will be an array of elements that will match the class .menu-button.
// Not just the .menu-button element within your directive.
// Try typing it in your browser developer tools console to see what I mean.
angular.element(document.querySelectorAll(".menu-button"))
If you really want to grab the individual elements from within the directive, you'll need to locate them like this:
// Use the element argument from the link function
angular.element(element[0].querySelectorAll(".menu-button"));
But -- in most cases it's easier (and more elegant) to use ng-click, ng-class directives and such. Just create your click handlers on the scope object in the directive link function and wire them in the html markup.
scope.myClickHandler = function() {
// Magic goes here
};
<div my-directive ng-click="myClickHandler"></div>
Hope this helps.