재귀 및 무한 반복 - 반복

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>

그것이 작동하는 방법 : 지시어는 지시어 템플릿 뷰에서 요소를 대체 한 후 검사 그렇다면, 블록 항목에 대한 몇 가지 차일이있는 경우, 추가 블록 요소 (지시문 자체)를 컴파일하고 컴파일합니다.

이 특정 코드는 테스트되지 않았지만 그와 비슷한 상황입니다.