All geek questions in one place

JSTree union in Angular directive

I have two fiddles with the same jstree load. One of them is wrapped in the angular directive, the other is not. I am new to angular. I do not see any images in the angular version. Also the animation does not work. Am I missing the jstree plugin, or do I need to add a binding function that will add this functionality?

Here is the fiddle: (not in angular js)

Here is a 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 the angular directive plunker:

http://plnkr.co/edit/xHIc4J

+4
source share
2 answers

Well on your plunger, you get 404 in the jstree stylesheet, put this HTML in your plunker and alt! I am linking to CSS from the authors site. I suggest you pull it and put the correct CSS path 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! Joke:)

+3
source

In my current AngularJS project, we integrate jsTree in the directive. It started off pretty well, but very quickly it became a nightmare. I can’t remember half of the problems we encountered, but we painfully ended up with a bunch of errors, confusing code. It would be best to just write our tree directive from scratch.

However, I just stumbled upon a project that I wanted to know about before:

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

This is exactly what we need, it is pure AngularJS (which is a HUGE benefit, no more jQuery events to register), and the creator is a well-known and respected person in the AngularJS community (the way that I build my applications is to him and his blog a lot of).

In general, it is not recommended that you wrap an existing jQuery-based library with the Angular directive, and this is especially true in this particular case. Save yourself from the pain and go clean Angular.

+1
source

Source: https://habr.com/ru/post/1499497/

More articles:


All Articles