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"修正されます。

私はあなたのコードを取り、それをプランクに入れて、これらの2つの変更を加えました.それは私にとってはうまくいきます.

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

于 2015-08-12T18:55:34.750 に答える