ezraroi / ngJsTree

Angular Directive for the famous JS Tree
http://ezraroi.github.io/ngJsTree/
MIT License
270 stars 101 forks source link

Crashes on Asyncronous load via angular query #99

Open jmoseman01 opened 7 years ago

jmoseman01 commented 7 years ago
<div js-tree="vm.treeConfig" ng-model="vm.nodes" tree="treeInstance" ></div> <!-- should-apply="ignoreModelChanges()" tree="treeInstance" tree-events="ready:readyCB;create_node:createNodeCB"></div> -->
jmoseman01 commented 7 years ago
function HomeController ($scope, Principal, LoginService, $state, Node,AlertService) {
        var vm = this;

        //jstree
        vm.ignoreChanges = false;
        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 : 'glyphicon glyphicon-flash'
                    },
                    star : {
                        icon : 'glyphicon glyphicon-star'
                    },
                    cloud : {
                        icon : 'glyphicon glyphicon-cloud'
                    }
                },
                version : 1,
                plugins : ['types','checkbox']
            };
        //jstree

        vm.nodes=[];

        // load all
         loadAll();

        function loadAll () {
            Node.query({}, onSuccess, onError);
            function onSuccess(data, headers) {
                for(var i=0;i<data.length;i++)
                {
                    var node={};
                    node.id=data[i].idstr;
                    node.text=data[i].text;
                    node.parent=data[i].parent;
                    node.state={opened:true};
//                    node.children=data[i].children;
                    vm.nodes.push(node);
                }
            }
            function onError(error) {
                AlertService.error(error.data.message);
            }
        }
        //load all
periface commented 7 years ago

Hi jmoseman01, i had the same problem i fixed it by setting the should-apply property of the directive to false, and then in my controller i created a function to reload the tree when the model is updated

function reloadTree(){
     vm.treeConfig.version ++;
}
_orgUnits.getOrganizationUnitsConfigModel().then(function (response) {
      var treeModel = response.data;
      for (var i = 0; i < treeModel.organizationUnits.length; i++) {
                buildTreeData(treeModel.organizationUnits[i]);
      }
      reloadTree();
});

The problem is that you must call the reloadTree method every time you update the tree model. Also i readed something about disabling the worker option in the core configuration object here https://github.com/ezraroi/ngJsTree/issues/54

I hope it helps.