如何在 AngularJS 中使用 jsTree 事件答案

【问题标题】：How to use jsTree events with AngularJS如何在 AngularJS 中使用 jsTree 事件
【发布时间】：2022-03-16 23:18:57
【问题描述】：

我使用AngularJS 中的指令成功加载了我的树。现在我想在我的树中添加事件（这里选择节点），所以我喜欢这样做。但我看不到我的警报。

我的代码：

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);

                        });

             }
          };
});

知道我错了吗？

【问题讨论】：

你能不能尝试把$(element).jstree({...})的引用存入一个变量，比如tree，然后再做tree.bind
@Chandermani，我试了一下，还是没有结果。

标签： angularjs angularjs-directive jstree

【解决方案1】：

要在jstree中使用事件，你必须在这一行添加“ui”：

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

现在可以了。

【讨论】：

【解决方案2】：

查看 jstree 演示，您将希望在 jstree 对象上调用 bind，而不是在元素上调用（您将能够绑定到元素上的 click，但这可能不是您想要的)

$(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');
  });

【讨论】：

嗨@leon，我这样做了，但没有结果，在我的控制台中，我看不到 clicked 这个词。谢谢