Add double click event on child node in angular-tree-widget

Question

I am new to angular-tree-widget.js. We need to implement double click event once we click on any tree child node. All I found only two events are supported.

$scope.$on('selection-changed', function (e, node) {
    //node - selected node in tree
    $scope.selectedNode = node;
});
$scope.$on('expanded-state-changed', function (e, node) {
    // node - the node on which the expanded state changed
    // to see the current state check the expanded property
    //console.log(node.expanded);
    $scope.exapndedNode = node;    
});

How do I add double click event on a node here? Please help me. Thanks in advance.

How to add this property to node? We are building the tree in angular.js? — Sushil Gupta
– Sushil Gupta, Commented Apr 6, 2017 at 16:17

Vadim · Accepted Answer · 2017-04-06 17:56:19Z

1

You can add ng-dblclick, as @Manikandan suggested, in the following way:

HTML

<body ng-controller="TreeController" ng-dblclick="dblclick($event)">
    <tree nodes='treeFamily'></tree>
</body>

JavaScript

controller('TreeController', ['$scope', function ($scope) {
    $scope.dblclick = function(evt) {
      angular.element(evt.target).toggleClass('red')
    }
    ...
}])

Live Demo

https://plnkr.co/edit/nWfiDA82WDpgRGnLqJUs?p=preview

As you can see, the idea is to subscribe to event on parent element of the tree and distinguish between tree items using evt.target, which is passed to event handler using angular's $event

answered Apr 6, 2017 at 17:56

Vadim

8,7744 gold badges47 silver badges52 bronze badges

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

2 Comments

Sushil Gupta Over a year ago

Thanks for the answer. But my question was "double click on child nodes of the tree". Which we are generating from database. if I double click on any of that node Is there a way I can handle the event?

Vadim Over a year ago

@SushilGupta My code actually handles double click on any of child nodes of the tree, not only tree itself. Just check out the live demo

Collectives™ on Stack Overflow

Add double click event on child node in angular-tree-widget

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related