4

I have two fiddles that have the same jstree loading in. One is wrapped in an angular directive, the other is not. I am new to angular. I am not seeing any of the images in the angular version. Also the animations do not work. Am I missing a jstree plugin, or do I need to add a bind function that will add in this functionality?

Here is the fiddle: (not in angular js)

Here is the simple js tree code :

   $('#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/

Here is a plunker with the angular directive:

http://plnkr.co/edit/xHIc4J

4

2 回答 2

3

好吧，在你的 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！开玩笑:)

于 2013-08-28T22:08:12.947 回答
1

在我当前的 AngularJS 项目中，我们将 jsTree 集成到一个指令中。一开始还不错，但很快就变成了一场噩梦。我不记得我们遇到的一半问题，但我们痛苦地最终得到了一堆错误的、令人费解的代码。从头开始编写我们的树指令会是一个更好的主意。

但是，我刚刚遇到了一个我希望我以前知道的项目：

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

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

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

于 2014-02-22T21:23:00.673 回答