angularjs - Wrapping JSTree in an Angular directive -
i have 2 fiddles have same jstree loading in. 1 wrapped in angular directive, other not. new angular. not seeing of images in angular version. animations not work. missing jstree plugin, or need add bind function add in functionality?
here fiddle: (not in angular js)
here simple js tree code :
$('#tree').jstree({ 'plugins' : ['themes', 'json_data', 'checkbox', 'types'], 'icon':false, 'checkbox' : { 'two_state' : true // nessesary 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; } } } } });
here plunker angular directive:
well on plunker, getting 404 on jstree style sheet, put html in plunker , viola! referencing css authors web site. suggest pull down , put 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 blame angular! kidding :)
Comments
Post a Comment