在angularjs指令中使用右键事件

Question

我想使用Angular指令的概念，在右键单击事件时为树视图的子节点显示一个弹出窗口。下面是我的示例代码:

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

我怎样才能做到这一点?

Answer 1

为了实现右键单击，您必须编写一个自定义指令，该指令将为您捕获事件。

下面是一个例子:

标记

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

指令

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

控制器

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

Answer 2

angular-treeview指令没有右键属性。

你可以参考Angular的treeview git库。

如果你需要这个特性，你可以开始在现有的指令中引入你的自定义属性，并把你的修改推回git。

Answer 3

我尝试了这个，但是事件console.log()被触发X次基于节点级别。

假设我点击了一个4级深的节点

它将console.log()遍历每个节点的父节点4次。