遞歸和無限ng-repeat

Question

我想創建一個div的可能無限樹。

這就是我實際上做：

<div ng-repeat="block in blocks"> 
    <p class="blocke" > {{block.title}} </p> 
    <input class="childButton" ng-model="childName[$index]" type="text" placeholder="child name"> 
    <button class="childButton" ng-click="addChild($index)" >Add child to {{block.title}} </button> 
</div> 

但在塊每一塊有子塊陣列等。

我想爲每個現有的塊創建與上面相同的div。在任何級別。

有沒有簡單的方法來做到這一點？

Answer 1

創建自定義指令，該指令在存在子項時調用自身。這與一些編輯應該工作：

app.directive('block', ['$compile', function ($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     block: '=' 
    }, 
    template: '<div>' + 
     '<p class="blocke"> {{block.title}} </p>' + 
     '<input class="childButton" ng-model="childName[$index]" type="text" placeholder="child name">' + 
     '<button class="childButton" ng-click="addChild($index)" >Add child to {{block.title}} </button>' + 
    '</div>', 
    link: function($scope, $element) { 
     if (angular.isArray($scope.block.childs) && $scope.block.childs.length > 0) { 
     $element.append('<block ng-repeat="childBlocks in block.childs" block="childBlocks"></block>'); 
     $compile($element.contents().last())($scope); 
     } 
    } 
    }; 
}]); 

使用<block ng-repeat="block in blocks" block="block></block>

工作原理：指令替換您的要素與指令模板的意見，然後檢查是否有對模塊項目的一些孩子的，如果是這樣，追加塊元素（指令本身）並編譯它。

這個特殊的代碼沒有經過測試，但這就是我在類似情況下所做的。