Why is my AngularJS TreeView component not loading

Victor Grazi

unread,

Nov 5, 2014, 5:06:55 PM11/5/14

to ang...@googlegroups.com

Hi, 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. The full html file is attached

<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.

Does anyone know what I might be doing wrong?

angular.treeview.js

Sander Elias

unread,

Nov 5, 2014, 11:37:10 PM11/5/14

to ang...@googlegroups.com

Hi Victor,

Did you inspect the developer console. It might just be that a script is not loading or something like that.

Regards

Sander

Message has been deleted

Victor Grazi

unread,

Nov 6, 2014, 9:54:32 AM11/6/14

to ang...@googlegroups.com

Thanks, do you mean the JavaScript console in chrome?

I am seeing a strange error there, will send it when I get to the office

Victor Grazi

unread,

Nov 6, 2014, 9:56:30 AM11/6/14

to ang...@googlegroups.com

Yes, I am seeing the following error in the Jaavscript console. Doesn't make much sense

On Wednesday, November 5, 2014 11:37:10 PM UTC-5, Sander Elias wrote:

Sander Elias

unread,

Nov 6, 2014, 11:38:21 AM11/6/14

to ang...@googlegroups.com

Your code is incomplete,

the controller named myController stops somewhere in the middle of it.

Regards

Sander

Reply all

Reply to author

Forward