Wrapping JSTree in an Angular directive

angularjs, jstree

Solution

Well on your plunker, you are getting a 404 on the jstree style sheet, put this HTML in your plunker and viola! I am referencing the CSS from the authors web site. I suggest you pull it down and put the right CSS path in there

<!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>

How dare you blame Angular! Kidding :)

Problem

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

Original source