Угловой рекурсивный шаблон

Question

У меня есть директива с шаблоном элемента, который рекурсивно ссылается на себя, но неправильно отображает детей за пределы первого уровня. Я рассмотрел несколько примеров, и, похоже, мой пример отличается только тем, что мои объекты загружаются страницей через запросы AJAX. Ниже я привел пример проблемы.

http://plnkr.co/edit/16wf1MS7vbk3qH8tcE7q?p=preview

<div my-directive></div> 

<script id="myDirectiveTemplate" type="text/ng-template"> 
    <h4> 
     My directive 
    </h4> 
    <ul> 
     <li ng-repeat="item in items" ng-include="'itemTemplate'"></li> 
    </ul> 
</script> 

<script id="itemTemplate" type="text/ng-template"> 
    <p> 
     {{ item.title }} 
    </p> 
    <ul ng-if="item.children.length"> 
     <li ng-repeat="child in item.children" ng-include="'itemTemplate'"></li> 
    </ul> 
</script> 

Моя директива:

angular.module("myApp") 
.directive("myDirective", ["$timeout", function ($timeout) { 
var scope; 

function loadPage() { 
    // makes an ajax call here to get a page 
    scope.items.push({ title: "Item 1", children: [] }); 
    scope.items.push({ title: "Item 2", children: [] }); 
    scope.items.push({ 
     title: "Item 3", 
     children: [ 
      { 
       title: "Child 1", 
       children: [] 
      }, 
      { 
       title: "Child 2", 
       children: [] 
      } 
     ] 
    }); 
} 

return { 
    restrict: "A", 
    templateUrl: "myDirectiveTemplate", 

    controller: ["$scope", function ($scope) { 
     $scope.items = []; 
     scope = $scope; 
    }], 

    link: function (scope, element, attrs) { 
     $timeout(function() { 
      loadPage(); 
     }); 
    } 
}; 
}]); 

Answer 1

Я отлажены логики немного и вот ваш обновленный SAMPLE

<script id="myDirectiveTemplate" type="text/ng-template"> 
      <ul> 
      <li ng-repeat="item in items"> 
       {{item.title}} 
       <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div> 
      </li> 
      </ul> 
    </script> 

    <script type="text/ng-template" id="itemTemplate"> 
    <ul> 
     <li ng-repeat="item in item.children"> 
      {{item.title}} 
     <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div> 
     </li> 
    </ul> 
    </script> 

ИЛИ вы можете попробовать ниже решение

<script id="myDirectiveTemplate1" type="text/ng-template"> 
    <ul> 
    <li ng-repeat="item in items" ng-include="'itemTemplateUpdated'"></li> 
    </ul> 
</script> 

<script type="text/ng-template" id="itemTemplateUpdated"> 
    {{item.title}} 
    <ul ng-if="item.children.length > 0"> 
     <li ng-repeat="item in item.children" ng-include="'itemTemplateUpdated'"> 
     </li> 
    </ul> 
</script>