javascriptangularjsangularjs-ng-repeatinfinite-loopangular-ui-tree

Angular (ui tree) ng-repeat: infinite loop

I have a problem with AngularJS and the directive ng-repeat and I can't figure out what's wrong. I'm using angular-ui-tree (https://github.com/angular-ui-tree/angular-ui-tree) to build an infinite nested tree. The first level of the tree is gonna be build by my code but if I append I child to an existing node the infinite loop error occurs.

So here's my code (I'm sorry but I couldn't get a jsfiddle to run...)

HTML

<html ng-app='test'>
<head>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <link rel="stylesheet" href="bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="angular-ui-tree.min.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script src="angular.js"></script>
    <script src="angular-ui-tree.min.js"></script>
    <script src="controllers.js"></script>
</head>
<body>
    <script type='text/ng-template' id="nodes_renderer.html">
        <div class='tree-node tree-node-content'>
            <button data-nodrag ng-click="toggle(this)" class="btn btn-xs btn-success glyphicon glyphicon-chevron-down"></button>
            <span>{{node.title}}</span>
            <button data-nodrag ng-click="upper(this)" ng-disabled="enableBtnUpper(this)" class="btn btn-xs btn-success glyphicon glyphicon-chevron-up"></button>
            <button data-nodrag ng-click="lower(this)" ng-disabled="enableBtnLower(this)" class="btn btn-xs btn-danger glyphicon glyphicon-chevron-down"></button>
        </div>
        <ol ui-tree-nodes="" ng-model="node.items">
            <li ng-repeat="subItem in node.items" ui-tree-node ng-include="'nodes_renderer.html'"></li>
        </ol>
    </script>
    <div id='tree-root' ui-tree data-no-drag ng-controller='PageStructureController'>
        <ol ui-tree-nodes ng-model='structure'>
            <li ng-repeat='node in structure', ui-tree-node ng-include="'nodes_renderer.html'"></li>
        </ol>
    </div>
</body>
</html>

and my angular controller:

angular.module('test', ['ui.tree'])
        .controller('PageStructureController' , ['$scope', function($scope) {
        $scope.structure = [{id:"1", items:[]}];

        $scope.lower = function(scope) {
            var nodeData = scope.$modelValue;
            nodeData.items.push({id: "25", items: []})


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

        };

        // TODo
        $scope.enableBtnLower = function(scope) {

        }

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

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

From other questions I've figured out that angular runs through my scope, found a new object -> runs again through my scope -> found a new object and so on.. but I can't figure out where the problem occurs. I know that a new object is created in the lower function but it's the same code like in their examples (https://github.com/angular-ui-tree/angular-ui-tree/tree/master/examples -> see basic-example)

I hope you can help me :-)

Solution

  • First, you have an extraneous character , after your ng-repeat="node in structure"

    Second, the issue you're running into is that you are repeating inside your template as subItem when the template is expecting scoped repeat items to be accessed as node. Changing it to be ng-repeat="node in node.items" should fix it.

    I took your code and put it into a plunk and made these 2 changes, and it works for me.

    Working example: http://plnkr.co/edit/RPoWoixqWHBr9mD3FuoL?p=preview