How to use jsTree events with AngularJS

Question

I load my tree successfully using a directive in AngularJS.Now i want to add events (here select node) in my tree, so i did like this. but i can't see my alert .

My code:

app.directive('jstree', function() {
  return {
    restrict: 'A',
     scope: {
          jstree: '='
         }, 

link: function(scope, element, attrs) 
      {        
       scope.$watch('jstree', function() 
         {

           $(element).jstree({

                          "json_data" :{
                            "data":scope.jstree.data
                            },

                           "themes" : {
                                     "theme" : "classic",
                                      "dots" : true,
                                     "icons" : true
                                    },
                            "plugins" : [ "themes", "json_data" ]
                        }, false); 
            }, true);

            // select a node
            element.bind("select_node.jstree",function(e, data) {
     $window.alert(e.data);

                        });

             }
          };
});

Any idea were i went wrong ?

Can you try to store the reference of $(element).jstree({...}) in a variable such as tree and then do tree.bind — Chandermani
– Chandermani, Commented Jul 10, 2013 at 13:07

svarog · Accepted Answer · 2022-03-16 15:18:57Z

1

To use events in jstree, you have to add "ui" in this line :

"plugins" : [ "themes", "json_data", "ui" ]

Now it works.

edited Mar 16, 2022 at 15:18

svarog

9,8755 gold badges66 silver badges79 bronze badges

answered Jul 11, 2013 at 10:50

JOlanare.AB

371 silver badge10 bronze badges

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

Comments

leon.io · Accepted Answer · 2013-07-10 15:47:42Z

0

Looking at the jstree demo, you'll want to call bind on the jstree object, not on the element (you'll be able to bind to click on the element, but this probably isn't what you want)

$(element)
  .jstree({
    "json_data" : {
        "data" : scope.jstree.data
    },
    "themes" : {
        "theme" : "classic",
        "dots" : true,
        "icons" : true
    },
    "plugins" : ["themes", "json_data"]
  }, false)
  .bind('select_node.jstree', function(ev,data) {
    console.log('clicked');
  });

answered Jul 10, 2013 at 15:47

leon.io

2,8341 gold badge20 silver badges26 bronze badges

1 Comment

JOlanare.AB Over a year ago

hi @leon, i did that, and no result, in my console, i can't see the word clicked . thks

Collectives™ on Stack Overflow

How to use jsTree events with AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related