Question

我想使用Angular指令概念在Rightclick事件上显示树视图的子节点的弹出窗口。以下是我的示例代码：

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

angular-treeview指令没有公开右键单击属性。

您可以参考Angular treeview git repository。

如果您需要此功能，可以开始在现有指令中引入自定义属性，并将更改推送回git。它取决于你。

Answer 2

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

这是一个例子：

<强>标记

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

我试过这个但是事件console.log（）根据节点级别被触发了X次。

所以我想说我点了4级深的节点。

它将console.log（）4遍遍历每个父节点。

在angularjs指令中使用Right Click事件

3 个答案: