the buttons on Angular treeview node are not working

Question

I downloaded the angular treeview from site http://ngmodules.org/modules/angular.treeview and implemented in my project (VS C#) did the bundels etc... anyway...it prompts on my screen correct. so I can click on "Add New Point" button and it adds new NODE.

Not working:

• Expand and Collapse all gives " RangeError: Maximum call stack size exceeded"

• +plus button (blue which is add node), x button (red-which is delete) buttons's are not working. When I try to click on the add node, or delete node button it focus it's self direct on the NODE completely as of I like to move the node.

It looks like the the node gets priority and the buttons node. I debugged in chrome and when I click on the buttons it doesn't get in the controller.

What am I doing wrong? or how can I trace it? it doesn't hit the controller:(

The code is copied from tree.js

   <div class="container">
    <h1 class="page-header">Tree - demo</h1>
    <a href="index.html"><i class="glyphicon glyphicon-chevron-left"></i> Back to overview page</a>
    <pre class="code">{{ edit }}</pre>
    <div class="row">
        <div class="col-lg-6">
            Options:
            <a href="" class="btn btn-default btn-sm pull-right" ng-click="">doc1 </a>
            <a href="" class="btn btn-default btn-sm pull-right" ng-click="">doc2 </a>
            <a href="" class="btn btn-default btn-sm pull-right" ng-click="">Copy Default Agenda</a>


            <hr />

            <h4 class="col-xs-12">
                Agenda
                <a href="" class="btn btn-default btn-sm pull-right" ng-click="collapseAll()">Collapse all</a>
                <a href="" class="btn btn-default btn-sm pull-right" ng-click="expandAll()">Expand all</a>
                <a href="" class="btn btn-default btn-sm btn-warning pull-right" ng-click="newItem()">Add New Point</a>
            </h4>

            <!-- Nested node template -->
            <script type="text/ng-template" id="nodes_renderer.html">
                <div ui-tree-handle class="tree-node tree-node-content">

                    <!--green left box-->
                    <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
                        <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span>
                    </a>

                    <!--input box for node-->
                    <span ng-hide="edit">{{node.title}}</span>

                    <!--edit mode-->
                    <a class="btn btn-default btn-xs" data-nodrag ng-hide="edit" ng-click="edit = true">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>

                    <!--edit save-->
                    <input type="text" class="input input-xs" ng-show="edit" ng-model="node.title">
                    <a class="btn btn-success btn-xs" data-nodrag ng-show="edit" ng-click="edit = false">
                        <span class="glyphicon glyphicon-floppy-save"></span>
                    </a>

                    <!--remove-->
                    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>

                    <!--add-->
                    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>

                    <!--upload-->
                    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="uploadFile(this)" style="margin-right: 8px;">
                        <span class="glyphicon glyphicon-paperclip"></span>
                    </a>


                </div>
                <!--node childs-->
                <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
                    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
                    </li>
                </ol>
            </script>

            <div class="col-xs-12">
                <div ui-tree id="tree-root">
                    <ol ui-tree-nodes="" ng-model="data">
                        <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <h3>Data binding</h3>
            <div class="info">
                {{info}}
            </div>
            <pre class="code">{{ data | json }}</pre>

        </div>
    </div>
</div>



app.controller('supplierCtrl', ['$scope', 'supplierService', function ($scope, supplierService) {
$scope.remove = function (scope) {
    scope.remove();
};


$scope.toggle = function (scope) {
    scope.toggle();
};

$scope.moveLastToTheBegginig = function () {
    var a = $scope.data.pop();
    $scope.data.splice(0, 0, a);
};

$scope.newSubItem = function (scope) {
    var nodeData = scope.$modelValue;

    nodeData.nodes.push({
        id: nodeData.id * 10 + nodeData.nodes.length,
        title: nodeData.title + '.' + (nodeData.nodes.length + 1),
        nodes: []
    });
};

$scope.newItem = function () {
    $scope.data.push({
        id: makeid(),
        title: 'New Point',
        nodes: []
    });
};

//$scope.uploadFile = function (scope) {
//    var x = scope;

//};

var getRootNodesScope = function () {
    return angular.element(document.getElementById('tree-root')).scope();
};

$scope.collapseAll = function () {
    var scope = getRootNodesScope();
    scope.collapseAll();
};

$scope.expandAll = function () {
    var scope = getRootNodesScope();
    scope.expandAll();
};

function makeid() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (var i = 0; i < 5; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return text;
}

$scope.data = [
{
"title": "adsfff adsf",
"id": "0",
"nodes": [
  {
      "title": "sss",
      "id": "1",
      "nodes": []
  },
  {
      "id": 3,
      "title": "sdf Consultation",
      "nodes": []
  },
  {
      "id": 10,
      "title": "asdf",
      "nodes": []
  },
  {
      "title": "sssadf",
      "id": "3",
      "nodes": []
  },
  {
      "id": 4,
      "title": "asdf",
      "nodes": []
  },
  {
      "id": 5,
      "title": "asdf",
      "nodes": []
  },
  {
      "id": 6,
      "title": "adsf ddd",
      "nodes": []
  }
]
},
{
"id": 7,
"title": "dddsadf",
"nodes": [
  {
      "id": 70,
      "title": "dadsfmme",
      "nodes": []
  },
  {
      "id": 71,
      "title": "adsfffe",
      "nodes": []
  }
]
}
];

}]);

Answer 1

1. Add the AngularJS controller to your code

   <div class="container" ng-controller="supplierCtrl"> 
   

   this will make it hit the controller.

If that doesn't solve the issue, add a JS alert to the toggle function of the AngularJS code

    $scope.toggle = function (scope) {
    alert('toggle function fired');
    scope.toggle();};

Using this technique you can step through your angular code and find out where the problem lies. Do this systematically until find the issue.