How to create a customized and generic right-click context menu with angularJs?

1. In the directive

app.directive("myContextmenu",...){
    ...
    contextMenu.scope = {
           "menuId": "@",
           "menuOptions": "=",
           "menuData": "="
        };
    ...
}

Which is used in the HMTL page as follows: 

<div menu-data="item.name" menu-id="#contextmenuDiv" menu-options="evenNumberOptions" my-contextmenu=""> </div>

Also in the directive we have the setContextmenuOptions function in which we assign the value of the option text, and we manage the option click by calling the function defined in the callback property defined in the controller :

function setContextmenuOptions(options, data) {
        ...
        angular.forEach(options, function (item, i) {
        ...
        //Le valeur du callback est la fonction définie dans le contrôleur.
             a.on("click", function () {
                item.callback(data);
             });
       //Le texte de l’option
       a.text(item.text);
       ...
       });
  }

2. In the controller

We define each of the menu options, with the text to be displayed and the action to be taken when clicking in the callback property, which corresponds to the definition of a function, which in turn calls the evenNumberExplorer function of the ContextmenuService service (ContextmenuService.evenNumberExplorer).

$scope.evenNumberOptions = [
        {
            text: "Even Number Explorer",
            description: "evenNumberExplorer",
            callback: function (number) {
                ContextmenuService.evenNumberExplorer("This contains my even item = " + number);
            }
        }
    ];

3. In the service

In the service, the evenNumberExplorer function called in the controller is defined. In our case, we just call an alert for the need of demo.

this.evenNumberExplorer = function (message) {
        alert("My message : " + message);
    };

The link of the demo project in GIT: https://github.com/zm2014/ContextMenuSample.github.io