Angular (ui 树) ng-repeat: 无限循环

Question

我对 AngularJS 和指令 ng-repeat 有疑问，我不知道哪里出了问题。我正在使用 angular-ui-tree (https://github.com/angular-ui-tree/angular-ui-tree) 构建无限嵌套树。树的第一层将由我的代码构建，但如果我将 I child 附加到现有节点，则会发生无限循环错误。

所以这是我的代码（很抱歉，我无法获得 jsfiddle 运行...）

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>

和我的 angular 控制器：

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) {
        };
    }]);

从其他问题中我发现 angular 运行s 通过我的范围，再次通过我的范围找到了一个新的 object -> 运行s - > 发现了一个新的 object 等等。但是我不知道问题出在哪里。我知道在较低的函数中创建了一个新的 object 但它与他们的示例中的代码相同 (https://github.com/angular-ui-tree/angular-ui-tree/tree/master/examples -> 请参阅 basic-example)

希望你能帮助我:-)

Answer 1

首先，您的 ng-repeat="node in structure"

之后有一个无关字符 ,

其次，您运行遇到的问题是您在模板中以 subItem 重复，而模板期望范围内的重复项目以 node 访问。将其更改为 ng-repeat="node in node.items" 应该可以修复它。

我把你的代码放到一个 plunk 中并进行了这 2 处更改，它对我有用。

工作示例：http://plnkr.co/edit/RPoWoixqWHBr9mD3FuoL?p=preview

Angular (ui 树) ng-repeat: 无限循环

Angular (ui tree) ng-repeat: infinite loop

javascript

infinite-loop

angularjs

angularjs-ng-repeat

angular-ui-tree