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

从其他问题我发现角度穿过我的范围，发现了一个新对象 - ＆gt;通过我的范围再次运行 - ＆gt;发现了一个新的对象等等..但我无法弄清楚问题出在哪里。我知道在较低的函数中创建了一个新对象，但它们的示例中的代码相同（https://github.com/angular-ui-tree/angular-ui-tree/tree/master/examples - ＆gt;参见basic-example）

我希望你能帮助我： - ）

Answer 1

首先，在,

之后，您有一个无关紧要的字符ng-repeat="node in structure"

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

我把你的代码放进了一个插件并进行了这两项更改，这对我有用。

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

角度（ui树）ng-repeat：无限循环

1 个答案: