Model data not updated

[pixelplant]

Hello hello :)

I'm using Angular 1.5.8 and the latest version of jsTree and ngJsTree.

I managed to get my tree to load some data but the tree does not seem to update once I update the model data.

In my controller I have this code defined:

angular.module('continut.cms').controller('EditorController', function($scope, $http, $log) {

  $scope.pageTreeData = [{id: '1', parent: '#', text: 'Simple root', 'icon':'fa fa-file'}, {id: '2', text: 'Blabla', parent: '1', 'icon':'fa fa-file'}];

Now, this initial data, these 2 nodes, show up just fine in jsTree, but once I change the value of the model the tree is not updated. It still shows only these 2 nodes and not the new ones...

In my view I have this:

<div js-tree="pageTreeConfig" class="page-tree" should-apply="pageTreeApply()" ng-model="pageTreeData" tree-events-obj="pageTreeEvents"></div>

This is my tree config:

$scope.pageTreeConfig = {
    core: {
      multiple : false,
      animation : 0,
      themes : {
        variant : 'large',
        dots : true
      },
      error : function(error) {
        $log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
      },
    },
    version : 1,
    plugins: ['dnd', 'search', 'wholerow', 'changed']
    //'plugins' : ['dnd', 'search', 'wholerow', 'checkbox']
  };

pageTreeEvents is called just fine, I can see my $log.info data.

Now, on a button I have an ng-click event that gets called, inside it an ajax call is made that is supposed to update the $scope.pageTreeData model but the jsTree is not updated:

This is my ng-click call:

$scope.reloadPageTree = function($event) {
    $http({method: 'GET', url: 'temp/page_tree.json'}).then(
      function successCallback(response) {
        $scope.pageTreeData = [{id: 1, parent: '#', text: 'Updated one'}];
        $log.info($scope.pageTreeData);
        //$scope.pageTreeData = response.data;
      },
      function errorCallback(response) {
      }
    );
    $event.preventDefault();
  }

Log info shows the right data in the model but nothing changes in the jsTree... Anyone has an idea why it's not updating? Do I need to update it manually, through another call?

Thanks

[ezraroi]

Looks like you are overriding the array and not adding / removing nodes from it. For this you will need to redraw the tree. Check the readme of the project

[pixelplant]

Oh yes, you were right. I thought we needed to recreate it only if we needed a different config for it, not if we completely need to switch the data. I just needed to increment the version, as the variable was already defined and now it works.

One more question: I had this config initially which worked just fine, and this loaded the tree data from a json file the first time the tree was displayed. This was defined in $scope.pageTreeConfig data: { url: 'temp/page_tree.json', data : function (node) { return { 'id' : node.id }; } }

With ngJsTree it does not seem to work though, as no data is loaded once jsTree starts, so how can we trigger a call to fetch the pages once the tree loads with ngJsTree?

Thanks again

[ezraroi]

check the demo page code.. it is adding nodes in async way