0

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

所以这是我的代码(很抱歉,我无法让 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) {
        };
    }]);

从其他问题中,我发现角度贯穿我的范围,找到了一个新对象->再次通过我的范围运行->找到了一个新对象等等..但我无法弄清楚问题发生在哪里。我知道在较低的函数中创建了一个新对象,但它与他们的示例中的代码相同(https://github.com/angular-ui-tree/angular-ui-tree/tree/master/examples -> 参见基本示例)

我希望你能帮帮我 :-)

4

1 回答 1

2

,首先,你有一个无关紧要的角色ng-repeat="node in structure"

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

我把你的代码放进去,做了这两个改变,它对我有用。

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

于 2015-08-12T18:55:34.750 回答