Why is my AngularJS TreeView not working?

Question

I am trying to use this interesting looking Angular treeview component, with no luck.

I know it is not a browser issue, because when I load it up from jsfiddle it works fine. (Tried it in Chrome latest version and IE, both on Windows)

I will paste a few poignant parts downloaded from the GIThub usage instructions.

<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script type="text/javascript" src="/angular.treeview.js"></script>
    <link rel="stylesheet" type="text/css" href="css/angular.treeview.css">
    <script>
        (function () {
            //angular module
            var myApp = angular.module('myApp', ['angularTreeview']);
            //test controller
            myApp.controller('myController', function ($scope) { 
                //test tree model 1 

                $scope.roleList1 = [
                    { "roleName": "User", "roleId": "role1", "children": [
                        { "roleName": "subUser1", "roleId": "role11", "children": [] },
                        { "roleName": "subUser2", "roleId": "role12", "children": [
                            { "roleName": "subUser2-1", "roleId": "role121", "children": [ 
                                                        . . . 
                ]; 
    </script> 
</head> 
<body> 
<div ng-app="myApp"> 
    <div ng-controller="myController"> 
        <div> 
            <input type="button" value="TREE MODEL 1" data-ng-click="roleList = roleList1"/> 
            <input type="button" value="TREE MODEL 2" data-ng-click="roleList = roleList2"/> 
        </div> 
        <div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;"> 
            <span><b>Selected Node</b> : {{currentNode.roleName}}</span> 
        </div> 
        <div 
                data-angular-treeview="true" 
                data-tree-model="roleList" 
                data-node-id="roleId" 
                data-node-label="roleName" 
                data-node-children="children"> 
        </div> 
    </div> 
</div> 
</body>

This is what I see when viewing the page. Clicking the buttons does nothing. enter image description here

Does anyone know what I might be doing wrong?

Can you adapt the jsFiddle to use your code? Also, are you seeing any error messages in the console? — Phil Sandler
– Phil Sandler, Commented Nov 5, 2014 at 22:13
I am seeing the error: Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/angular.treeview.js Error: Argument 'myController' is not a function, got undefined at Error (native) at bb (ajax.googleapis.com/ajax/libs/angularjs/1.0.8/…) at ra (ajax.googleapis.com/ajax/libs/angularjs/1.0.8/…) at ajax.googleapis.com/ajax/libs/angularjs/1.0.8/… at ajax.googleapis.com/ajax/libs/angularjs/1.0.8/… . . . — Victor Grazi
– Victor Grazi, Commented Nov 5, 2014 at 22:42
Our enterprise proxy does not allow us to see JSFiddle. Will need to try it from home later. (The earlier one I was able to check from my tablet) — Victor Grazi
– Victor Grazi, Commented Nov 5, 2014 at 22:49
It sounds like you haven't set up your controller correctly, and your path to the the treeview file is incorrect. — Phil Sandler
– Phil Sandler, Commented Nov 5, 2014 at 22:50
I think the treeview.js file is correct, when I ctrl-click it in the html page in my IDE (IntelliJ) it brings me to the correct file. The controller is set up in the code above, I can't swear to it, but it looks right to me. But if I had to bet I'd say you're right. Is there any way to check for that? — Victor Grazi
– Victor Grazi, Commented Nov 5, 2014 at 23:06

Karthik · Accepted Answer · 2015-04-05 13:45:34Z

2

The fiddle you have is missing the attribute data-tree-id. I looked at the source code for the tree view and this now seems to be a necessary attribute(there is a null check for it). Change your declaration to

 <div data-angular-treeview="true" 
      data-tree-id="myTree"
      data-tree-model="roleList" 
      data-node-id="roleId" 
      data-node-label="roleName" 
      data-node-children="children"> 
 </div>

answered Apr 5, 2015 at 13:45

Karthik

1,01111 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Clint Powell · Accepted Answer · 2014-11-05 23:56:24Z

1

If your code is current, you haven't closed off your brackets and parentheses. The fact that {{currentNode.roleName}} is showing in your DOM tells me there's a syntax error or something. Check your debugger.

<script>
    (function () {
        //angular module
        var myApp = angular.module('myApp', ['angularTreeview']);
        //test controller
        myApp.controller('myController', function ($scope) { 
            //test tree model 1 

            $scope.roleList1 = [
                { "roleName": "User", "roleId": "role1", "children": [
                    { "roleName": "subUser1", "roleId": "role11", "children": [] },
                    { "roleName": "subUser2", "roleId": "role12", "children": [
                        { "roleName": "subUser2-1", "roleId": "role121", "children": [ 
                                                    . . . 
            ];
        });
    })();
</script>

Also, according to the comments, you probably want to take off the / in your path to the tree-view. Since you're testing locally without a web server, you have to use relative paths. Make sure angular.treeview.js is in the same directory as your html, then change the script tag to:

<script type="text/javascript" src="angular.treeview.js"></script>

EDIT One more point: looks like you have ng-app in your html tag as well as your body tag. Just move the tag from body to html so you have this:

<html ng-app="myApp">
...
<body>

edited Nov 5, 2014 at 23:56

answered Nov 5, 2014 at 23:50

Clint Powell

2,4082 gold badges18 silver badges19 bronze badges

1 Comment

Victor Grazi Over a year ago

Not much luck. I even embedded the treeview code into the html page which stopped the error, but still not working. Let me figure out how to use the Batarang debugger.

user2790547 · Accepted Answer · 2017-07-09 09:12:39Z

0

Please check the value what you are passing. you are calling it like *data-tree-model="roleList" * but in data you have written roleList1.

I Think that is the issue.

answered Jul 9, 2017 at 9:12

user2790547

11 silver badge5 bronze badges

Collectives™ on Stack Overflow

Why is my AngularJS TreeView not working?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related