Question

我有两个具有相同jstree加载的小提琴。一个用angular指令包装，另一个不包含。我是棱角分明的新手。我没有看到角度版本中的任何图像。动画也不起作用。我错过了一个jstree插件，还是我需要添加一个将添加此功能的绑定功能？

这是小提琴:(不是角js）

这是简单的js树代码：

   $('#tree').jstree({
'plugins' : ['themes', 'json_data', 'checkbox', 'types'],
  'icon':false,
'checkbox' : {
  'two_state' : true // Nessesary to disable default checking childrens
},
 "json_data" : {
                        "data" : [
    {
        "data" : "Basics",
        "state" : "open",
        "children" : [{
            "data" : "login",
            "state" : "closed",
            "children" : [ "login", {"data" : "results", "state" : "open"} ]
        },


            {
                "data" : "Basics",
                "state" : "closed",
                "children" : [ "login", "something",{"data" : "results", "state" : "closed"} ]
            }
        ]
    },
    {
        "data" : "All",
        "state" : "closed",
        "children" : [ {
            "data" : "AddCustomer",
            "state" : "closed",
            "children" : [ "login","Add", {"data" : "results", "state" : "closed"} ]
        }    ]
    }
]
                    },
"types" : {
  "types": {
    "disabled" : { // Defining new type 'disabled'
      "check_node" : false, 
      "uncheck_node" : false 
    }, 
    "default" : { // Override default functionality
      "check_node" : function (node) {
        $(node).children('ul').children('li').children('a').children('.jstree-checkbox').click();
        return true;
      },
      "uncheck_node" : function (node) {
        $(node).children('ul').children('li').children('a').children('.jstree-checkbox').click();
        return true;
      }
    } 
  }
}

}）;

http://jsfiddle.net/R3vZv/

这是一个带有角度指令的plunker：

http://plnkr.co/edit/xHIc4J

Answer 1

在您的plunker上，您在jstree样式表上获得了404，将此HTML放入您的plunker和viola中！我正在引用作者网站上的CSS。我建议你把它拉下来，把正确的CSS路径放在那里

<!doctype html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title>jsTreeAngular</title>
       <link rel="stylesheet" href="http://hqnetworks.pl/strassmayr_zpf/web/js/themes/default/style.css" />
       <script  type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
       <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
       <script  type="text/javascript" src="jquery.jstree.js" ></script>
       <script type="text/javascript" src="app.js" ></script>
    </head>
    <body>
        <div ng-controller="TestCtrl" ng-app="jsTreeApp">
            </br>
            </br>
            </br>
            <jstree data="5"></jstree>
        </div>
   </body>
</html>

你怎么敢责怪Angular！开玩笑：）

Answer 2

在我目前的AngularJS项目中，我们正在将jsTree集成到一个指令中。它开始很好，但很快它变成了一场噩梦。我不记得我们遇到的一半问题，但是我们痛苦地结束了一堆错误，错综复杂的代码。从头开始编写我们的树指令本来是一个更好的主意。

然而，我刚刚参加了一个我希望之前知道的项目：

https://github.com/tchatel/angular-treeRepeat

这正是我们所需要的，它是纯粹的AngularJS（这是一个巨大的好处，不再需要注册的jQuery事件），而且创建者是AngularJS社区中一个众所周知且受人尊敬的人（我构建我的应用程序的方式欠款）他和他的博客很多。）

一般来说，使用Angular指令包装现有的基于jQuery的库并不是一个好主意，在这种特殊情况下尤其如此。拯救自己的痛苦并走向纯粹的角色。

在Angular指令中包装JSTree

2 个答案: