CODEWITHSUNDEEP
angularjs
Victor Grazi
Victor Grazi

Reputation: 16520

Why is my AngularJS TreeView not working?

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?

Upvotes: 0

Views: 1622

Answers (3)

user2790547
user2790547

Reputation: 1

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.

Upvotes: 0

Karthik
Karthik

Reputation: 1001

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>

Upvotes: 2

Clint Powell
Clint Powell

Reputation: 2398

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>

Upvotes: 1

Related Questions