Search code examples
javascriptangularjsjstree

Adding bower module ng-js-Tree to an AngularJs project

I followed this steps to use ng-js-tree in my AngularJS project:

1)I installed the dependencies through npm install ng-js-tree --save

2)On my Index.html, y added the following line: <script src="bower_components/ng-js-tree/dist/ngJsTree.js"></script>

3)I Loaded the dependencies in the following way:

.state('dashboard.form', {
            templateUrl: 'views/form.html',
            url: '/form',
            controller: 'ChartCtrl',
            resolve: {
                loadMyFiles: function ($ocLazyLoad) {
                    return  $ocLazyLoad.load({
                            name: 'ngJsTree',
                            files: ['bower_components/ng-js-tree/ngJsTree.js']
                        }),
                        $ocLazyLoad.load({
                            name: 'sbAdminApp',
                            files: ['scripts/controllers/form.js']
                        })
                }
            }
        })`

4) I defined the controller with its appropriate function: (not going to post the entire function, I'm pretty sure it's not necessary)

myModule.controller('treeCtrl', treeCtrl);

5)And finally, I posted it on the .html file:

 <div class="container" ng-controller="treeCtrl as vm">
      <div js-tree="vm.treeConfig" should-apply="vm.applyModelChanges()"
                     ng-model="vm.treeData" tree="vm.treeInstance"
                      tree-events="ready:vm.readyCB;create_node:vm.createCB"></div>
 </div>

The problem is that it doesn't show anything, and it throws the following error:

TypeError: scope.tree.jstree is not a function

I found this help on github, but I'm doing what it is saying and can't make it work... any help?

EDITED with tree file...both .js are the same (tested) enter image description here

Solution

  • Add this to your 'index.html':

    <link rel="stylesheet" href="bower_components/jstree/dist/themes/default/style.css" />