在angularjs指令中使用Rightclick事件
我想使用Angular指令概念在Rightclick事件中显示一个树视图的子节点的popupwindow。 以下是我的示例代码:
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); }
我怎样才能做到这一点?
angular-treeview指令没有显示右键属性。
你可以参考Angular TreeView的git仓库 。
如果你需要这个function,你可以开始在现有的指令中引入你的自定义属性,并将你的修改推回到git。 随你便。
为了实现一个正确的点击,你必须写一个自定义的指令,将为您捕捉事件。
这里是一个例子:
标记
<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'); }; });
我试过这个,但是事件console.log()被触发了X次的基于节点级别的次数。
所以我们可以说我点击了一个4级的节点。
它将console.log()迭代4次遍历每个节点父节点。