arvindr21 / jstree-directive

An Angular Directive for jsTree. Docs :

jsTree-directive

An Angular Directive for jsTree

• Documentation

Install using bower

$ bower i jstree-directive

Tutorial

Building a Web Based File Browser with jsTree, Angularjs and Expressjs

PS : Do note that if you want to make your app 100% Angular, load the jsTree Javascript source using an Angular provider as a dependency to jstree.directive.

jstree-directive's Issues

Search box on the tope of tree

Hi, I want to use the out-of-box search box, but I would like to have it on the top of the tree. Is it possible to make it configurable?
Thanks,
-ZJ

Updating when new file is created

Hi , I'm using the directive by looking at the example. In my application I upload a file by pressing a button. Then tree should update the graphic tree of files, but I have to refresh the entire page in order to see the changes in dir tree. Is there any way by using your directive to refresh the tree ? Thanks in advance

AjaxTree Jquery Error

I load the tree : "js-tree tree-plugins="wholerow,dnd" tree-ajax="api/v1/apps/files_tree"></js-tree"
My backend emit this json:

[{"text": "Child Node 1", "a_attr": {"b-prop": false, "a-prop": false}, "children": true, "state": {"disabled": false, "selected": true, "opened": false}, "id": 2, "li_attr": {"x-prop": false, "y-prop": false}}, {"text": "Child Node 2", "state": {"disabled": false, "selected": false, "opened": false}, "children": true, "id": 3, "icon": "/jstree/imgs/tree.png"}]

And i get this error from jquery 2.1.3:

Error: Syntax error, unrecognized expression: [{"text": "Root Node 1", "a_attr": {"b-prop": true, "a-prop": true}, "children": true, "state": {"disabled": false, "selected": true, "opened": false}, "id": "tree_id_1", "li_attr": {"x-prop": true, "y-prop": true}, "icon": "/jstree/imgs/tree.png"}, {"text": "Root Node 2", "a_attr": {"b-prop": false, "a-prop": false}, "children": true, "state": {"disabled": false, "selected": false, "opened": false}, "id": "tree_id_2", "li_attr": {"x-prop": false, "y-prop": false}}]

throw new Error( "Syntax error, unrecognized expression: " + msg );

With tree-json everything is ok but not with tree-ajax ...
I use jstree 3.0.9

jsTree- Directive Uncaught RangeError: Maximum call stack size exceeded

Hi,
I would like to make static node, but i have problem , in my database i have maybe 5k records
Error is in this line jstree.min.js
if ("#" === r.id) return this.redraw(!0);
if (i = i || 0 === r.children.length, t = document.querySelector ? this.element[0].querySelector("#" + (-1 !== "0123456789".indexOf(r.id[0]) ? "\3" + r.id[0] + " " + r.id.substr(1).replace(e.jstree.idregex, "$&") : r.id.replace(e.jstree.idregex, "$&"))) : document.getElementById(r.id)) t = e(t), s || (n = t.parent().parent()[0], n === this.element[0] && (n = null), a = t.index()), i || !r.children.length || t.children(".jstree-children").length || (i = !0), i || (d = t.children(".jstree-children")[0]), p = t.attr("aria-selected"), f = t.children(".jstree-anchor")[0] === document.activeElement, t.remove();

what can i do ?

Enable binding to data from scope

It will be great if you will add another option for the data source to be 'model' for example.
With this option, the data will be an array in the scope that will be passed to the directive. The directive will watch on it also will refresh the tree content every time the data is changed.

custom context menu doesnt work

so this example of my plunker. I did every step follow by doc but the custom menu doesn't work. Where is my problem?

jsTree not been created when tree-data="scope"

when set tree-data="scope", the jsTree will not be initiated unless the scope data changes.

in the code you setup the watch, but the function will not be triggered until I call $scope.$apply() some where.

s.$watch(a.treeModel, function(o, n) {
    if (n) {
        config = {
        'core': {
            'data': s[a.treeModel]
        }
        };
        $(e).jstree('destroy');
        treeDir.init(s, e, a, config);
    }
}, true);

How to search with input-text into jsTree directive.

Hi, this could help you if you want to search using an input-text with Arvind's directive: http://jstree-directive.herokuapp.com/#/plugins

I used the Arvind's jsTree-directive example and I changed the tree-plugins attribute, putting equals to search and it works perfectly! :

Thanks Arvind!

jstree instance

Hi, is there any way to retrieve the jstree instance in the controller so that I can use the jsTree API?

My problem is that I have multiple trees in a page and when I select one folder I would like to deselect any selected folder in the other trees. I think it could work by calling the "deselect_all" method in each tree.

It would be good if you could bind the instance with a scope variable:

<js-tree tree-instance="myTree" ...>

Thanks.

Unable to get events

I have this tree:

In my controller :
$scope.openNodeCB = function(e, data) {
console.log('open-node event call back');
};

And nothing log .... :(

Plans for Angular 2?

Just wondering

Sort plugin failed

How to ignore capitalize in sort ?

managing tree-ajax error

Is there a way to manage errors from backend on tree-ajax url call ?

Could you provide examples on the documentation ?

Thanks

Problem with ngResource

If i try to use an $resource (ngResource) object as model, i get following error:

RangeError: Maximum call stack size exceeded
at Array.toString (native)

Using simple json, seems not to be a problem. Im wondering how shpul i use such object with the jsTree?

multiple instances of js-tree

I have 2 instances of jstree.
var selectedNode = $('js-tree').jstree(true).get_selected(true)[0];
var parentNodeId = $('js-tree').jstree("get_parent",selectedNode);
but parentNodeId is returning false.
It does not understand which tree is it on.

Same name nodes in parent folder disappear.

I use this directive show my folder files. My tree view like below.

In folder 1231, there are some files which name same with some files in parent folder. But when i open this sub folder, the same name nodes in parent folder disappear.

How to fix this problem?

Double click event binding

Is it possible to bind double click event from controller ?

I followed vakata/jstree#515, but double click event was not fired.

`
var myApp = angular.module('myApp', [ 'jsTree.directive']);
myApp.controller('mainController', function($scope) {

// jstree double click event
// vakata/jstree#515
$(function() {
console.log( "ready!", $('#mytree') );
$('#mytree').on('dblclick','.jstree-anchor', function (e) {
alert("double click fired");
});
});

})
`

Example

Can you show example of using this directive?
Also with communication between this directive and other modules.

jsTree- Directive detected problems $scope

Hi arvindr21 !
First problem is : I have tree with data and if some children are selected ,then root is opened .Root is open although his state is "opened = false"

Second problem is : Scope is not updating when i would like select a checkbox
Could you fix the problem ?

Regards
Simon

Browser tab crashes on multiple refresh

Hi, I am using jsTree directive for my project and I have found that when the tree is refreshed/ reloaded multiple times, it causes the browser tab to crash regardless of the size of tree. The issue is even reproduced on the http://jstree-directive.herokuapp.com mentioned on your git repository as shown in the gif attached.

When i use jsTree-directive i got undefined error in console

When i include this in my project i got the error as follows:
TypeError: undefined is not a function
at Object.treeDir.init (jsTree.directive.js:131)
at jsTree.directive.js:99
at jsTree.directive.js:16
at deferred.promise.then.wrappedCallback (angular.js:11573)
at deferred.promise.then.wrappedCallback (angular.js:11573)
at angular.js:11659
at Scope.$get.Scope.$eval (angular.js:12702)
at Scope.$get.Scope.$digest (angular.js:12514)
at Scope.$get.Scope.$apply (angular.js:12806)
at done (angular.js:8379)

Code:

File Tree is not looking properly

I am reading the directory structure from physical location. My tree is correct but the look and feel of the tree is not impressive. What should i have to change, please suggest:

Issue with 2 trees, one of them loaded with state plugin

If multiple trees are loaded and one of them will have the state parameter.
Errors between the trees occur when traverses the same folders.

TypeError: a.state is undefined
...d:function(a){return a=this.get_node(a),a&&a.state.loaded},is_loading:function(a...

or

TypeError: this._model.data[b].state is undefined
...model.data.hasOwnProperty(b)&&"#"!==b&&(this._model.data[b].state.opened&&a.core...

Select a node inside the controller

So sorry. This is not an issue but I do not know where to put this kind of questions.

What I try to do is to select a specific Node in the tree using a function inside the controller so.

$scope.SelectNode = function() {
var item = _.findWhere($scope.treeData, { id : $scope.selectedNodeId } );
//And Here I need to select the node in the tree so the user knows what s/he is looking at. Samething like item.select =true.
};

I try to use $scope.treeData.jstree("select_node", $scope.selectedNodeId); but it is not working I get the error TypeError: $scope.treeData.jstree is not a function

I really need help!
Best Regards
Henry

Search input box position

In case of large tree, search input box positioning before tree-view is better.

I want position search input box before jstree. I have tried to change position, but not worked.
from :
e.after(<input type="text" placeholder="Search Tree" class="ng-tree-search"/>)
to:
e.before(<input type="text" placeholder="Search Tree" class="ng-tree-search"/>)

Search plugin results double input field

I used it like below:
<js-tree tree-plugins="search,wholerow" tree-data="scope" tree-events="select_node:nodeSelected" tree-model="tree">

Screen shot:

How can i call functions like reload on Js Tree