Using Rightclick event in angularjs directives - node.js

Question

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?

Answer 1

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 2

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 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.