Using Rightclick event in angularjs directives

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?

To my knowledge, there is no such a thing as ng-rightclick? You could use this library github.com/ianwalter/ng-context-menu and use the attribute ng-contex-menu — Kousha
– Kousha, Commented Aug 22, 2014 at 6:29
Have a look at the link I posted. It has a very good instruction. — Kousha
– Kousha, Commented Aug 22, 2014 at 6:54

bengro · Accepted Answer · 2014-08-22 07:50:58Z

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');
   };
});

answered Aug 22, 2014 at 7:50

bengro

1,02411 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

glepretre · Accepted Answer · 2014-08-26 15:48:05Z

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.

edited Aug 26, 2014 at 15:48

glepretre

8,1675 gold badges47 silver badges58 bronze badges

answered Aug 22, 2014 at 7:24

Dilip Tirumala

3711 silver badge10 bronze badges

Comments

ADL · Accepted Answer · 2015-01-02 17:44:28Z

0

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.

answered Jan 2, 2015 at 17:44

ADL

2,8761 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Using Rightclick event in angularjs directives

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related