AngularJS two directives with template on same element

Question

I'm trying to create a context menu directive for my angular application. I want this directive to be used for any element in the application that needs a context menu.

The problem is that in my app there are many 'user controls', that is - directives for extending buttons, inputs, grid etc. If I try to put the my-context-menu directive on any of them I get a multidir error, since both of the directives are defining templates.

The context menu directive looks something like this:

angular.module('myApp').directive('myContextMenu', function () {

    var myContextMenu= {};

    myContextMenu.restrict = 'A';

    myContextMenu.templateUrl = 'templates/myContextMenuTemplate.html';

    // Here I have scope and controller with all the functionality

    return myContextMenu;
});

Another directive for example:

angular.module('myApp').directive('myGrid', function () {

    var myGrid= {};

    myGrid.restrict = 'E';

    myGrid.templateUrl = 'templates/myGridTemplate.html';

    // Here I have scope, controller and link function with all the functionality

    return myGrid;
});

I want to have a context menu on the grid, and that in the grid directive I will be able to access the context menu controller.

What I tried is this: <my-grid id="grid" my-context-menu /> which failed as expected...

Do you have any solution or other idea on how to achieve this?

Thanks in advance!

My angular version: 1.3.8

Answer 1

You can share controllers between directives writing the same controller on the controller attribute of the directive object. And you can use transclude to embed html inside a directive with its own template. https://docs.angularjs.org/api/ng/directive/ngTransclude