I have created a directive that I use on an attribute, in particular a button or anchor.
When clicking the button I append a template (that contains a div) after the button. If the button (or outside of the button / menu ie. body) is clicked again I would like to hide the div contained in the template.
I have the following so far but I can't get the isVisible to update and hide the div (menu)
Main directive code:
return {
restrict: 'A',
scope: {
},
link: function (scope, element, attr) {
scope.isVisible = false;
element.bind('click', function () {
var menu = element.parent().find('.actionMenuDir');
if (menu.length === 0) {
$templateRequest('app/directives/popupmenu/actionpopup.html').then(function(html) {
var template = angular.element(html);
element.after(template);
$compile(template)(scope);
});
} else {
scope.isVisible = !scope.isVisible;
}
$compile(menu)(scope);
});
}
}
Template markup:
<div class="actionMenuDir" ng-if="isVisible">
{{isVisible}}
<ul>
<li>Menu Yo</li>
</ul>
Button markup with directive used:
<button popup-menu type="button">BUTTON</button>
