Using Rightclick event in angularjs directives

Question

Using Rightclick event in angularjs directives

I would like to use the Angular directives concept to display a popupwindow for a child node of a tree view upon a Rightclick event. Below is my sample code:

Tree.html

<div
  data-angular-treeview="true"
  data-tree-model="roleList"
  data-node-id="roleId"
   data-node-label="roleName"
   data-node-children="children"
   data-ng-rigtclick="onItemRightClick()" 
    data-node-children="children">
    </div>

treeViewcontroller.js

$scope.roleList1 = [
        { "roleName" : "User", "roleId" : "role1", "children" : [
          { "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
          { "roleName" : "subUser2", "roleId" : "role12", "children" : [
            { "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
              { "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
              { "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "roleName" : "Admin", "roleId" : "role2", "children" : [] },

        { "roleName" : "Guest", "roleId" : "role3", "children" : [] }



      ];

Treeview.js

scope.onItemRightClick= function(val)
    {
    alert(val.roleName);
    }

How can I achieve this?

node.js
angularjs
treeview

Answer 1

angular-treeview directive doesn't have right click attribute exposed.

You can refer Angular treeview git repository.

If you need this feature, you can start introducing your custom attribute in existing directive and push your changes back to git. It's up to you.

Answer 2

In order to achieve a right click, you have to write a custom directive which will catch the event for you.

Here an example:

Markup

<div id="name" ng-controller='myController'>
   <button name="button" my-right-click='test()'>my button</button>
</div>

The directive

app.directive('myRightClick', function($parse) {
  return {
    scope: false,
    restrict: 'A',
    link: function(scope, element, attrs) {
      var fn = $parse(attrs.myRightClick);
      element.bind('contextmenu', function(event) {
        scope.$apply(function() {
          event.preventDefault();
          fn(scope, {$event:event});
        });
      });
    }
  }
});

The controller

app.controller('myController', function($scope) {
   $scope.test = function() { // method is passed in by attribute
      console.log('hello from controller');
   };
});

Answer 3

I tried this however the event console.log() is being triggered X amount of times based on nodes level.

So lets say i clicked on a node 4 levels deep.

It will console.log() 4 times iterating through each nodes parent.