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

Question

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)

Answer 1

将此添加到您的“ index.html”中：

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