Cannot asynchronously init ngJsTree about ngjstree HOT 18 CLOSED

Create the options object with empty array. After thus, evey item you will add to the array will be added to the tree.

from ngjstree.

Well, it doesn't seem to work, actually.
The following code does not populate the tree:

<div js-tree ng-model="options"></div>

$scope.options = [];
$resource.get(init);
function init(response) {
    // $scope.options = response;
    $scope.options.push(response);
}

from ngjstree.

Finally I made it work, using the solution proposed on #7:
incrementing by 1 the version property.

But do you know why I get this jstree error in console using the above refreshing method?

Uncaught TypeError: Cannot read property 'triggerHandler' of null

It's sounds like "init" gets called before the jsTree DOM element is created.

from ngjstree.

By incrementing the version you recreate the tree. I will update the demo to load the data async, i am using it in several projects in async way. You should increment the the version only when you want to recreate the tree

from ngjstree.

Yes, and that way it works, thanx.
The only thing still I cannot understand is that jstree error in console:

Uncaught TypeError: Cannot read property 'triggerHandler' of null

from ngjstree.

If you write a plunker that reproduces this error message i will debug it. I never experienced such error before

from ngjstree.

I'll try to write a plunker as soon as I can.
By the way... it seems something in jstree code triggered by the nodesWatcher.onAdded.
Are you supposing a data structure where each item has a "parent" property?
I am actually using the "children" version of data definition:

{id: "1", text: "label", children: [...]}

from ngjstree.

The same here: Uncaught TypeError: Cannot read property 'triggerHandler' of null when i call $scope.treeConfig.version++; ...just without change the model

from ngjstree.

Yes, I found the problem relies exactly in that line of code: $scope.treeConfig.version++.
By the way I cannot replicate the error on a plunker (http://plnkr.co/edit/4pvwj5rmKyMdYORJ9oY8?p=info). No error there. I cannot understand why.
It looks like some jquery event is triggered when the jstree DOM element is empty, so that this.element.triggerHandler triggers the error.

By the way I found a viable solution by using ng-if on js-tree element. This eliminates the error.

<div ng-if="treeData" js-tree="treeConfig" ng-model="treeModel"></div>

$resource(URL).get().$promise.then(function(response) {
    $scope.treeData = response;
    // remaining ng-jstree initialization code
});

from ngjstree.

The version++ hack is meant for recreating the tree from scratch.. you don't want to use if unless there is a real need for this

from ngjstree.

Well, in my situation I use it to redraw the tree after loading data through ajax (a get with angular $resource).
Is there an alternative way?

Actually I've also experimented with your code.
Using jstree refresh() method seems to do the trick:

scope.$watch(getOptions, function () {
    if (scope.tree) { 
        scope.tree.jstree(true).settings.core.data = scope.treeData;
        scope.tree.jstree(true).refresh(); 
     }
 else {
         scope.destroy();
         scope.init();
     }
});

from ngjstree.

The right way to load async data is to create the tree with an empty array of nodes. once your async data is returned from the server, push it to the array that you created the tree with. This way the binding will know of the change and will add the new nodes to the tree

from ngjstree.

I am not sure to get the point.
Could you please modify my plunker to show the right way?

from ngjstree.

I will try to find time to do it today, anyway. You can also you the resolve feature of angular and inject that data to the controller.

Will write once will look on the plunker

from ngjstree.

Thank you!

from ngjstree.

hi! I get the same error when first loading the tree:
I do this

 vm.treeData = [];
    angular.copy(myData, vm.treeData);
    vm.treeConfig = {
        core: {
            multiple: false,
            animation: true,
            error: function (error) {
                $log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
            },
            check_callback: true,
            worker: true
        },
        types: {
            default: {
                icon: 'fa fa-file-code-o'
            },
            folder: {
                icon: 'fa fa-folder-o'
            },
            config: {
                icon: 'glyphicon glyphicon-settings'
            }
            ,
            solution: {
                icon: 'fa fa-cubes'
            }
            ,
            project: {
                icon: 'fa fa-cube'
            }
             ,
            settings: {
                icon: 'fa fa-cog'
            },
            file: {
                icon: 'fa fa-file-code-o'
            }
        },
        version: 1,
        plugins: ['types']
    };
    $scope.$apply();

at the end I get the dreaded

Uncaught TypeError: Cannot read property 'triggerHandler' of null

from ngjstree.

I also get this "Uncaught TypeError: Cannot read property 'triggerHandler' of null" error when initializing with an empty array of nodes and then changing it on $http.get

from ngjstree.

$scope.treeData = null；
<div ng-if="treeData != null"> <div id="jstree" js-tree="treeConfig" ng-model="treeData" tree="treeInstance" tree-events="changed:changedCB"></div> </div>

from ngjstree.