node.js - 在 angularjs 指令中使用右键单击事件

Question

我想使用 Angular 指令概念在右键单击事件时显示 TreeView 的子 Node 的弹出窗口。下面是我的示例代码:

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

Controller

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