AngularJS遞歸模板渲染

Question

我無法讓它發揮作用。 簡化了所有內容並將其放在小提琴中： http ： //jsfiddle.net/svdoever/94aQH/1/ 。

我想渲染一本包含段落的書的層次章節，段落可以包含子段落。

碼：

angular.module("myApp", []).controller("TreeController", ['$scope', function($scope) {
$scope.vm = {};
$scope.vm.chapter = {
        "Id": "N7313",
        "Title": "1 Chapter1",
        "Content": "<p>Contents1</p>",
        "Paragraphs": [
            {
                "Id": "N1.1",
                "Title": "1.1 Paragraph1.1",
                "Content": "<p>Content2</p>",
                "Paragraphs": [
                    {
                        "Id": "N1.1.1",
                        "Title": "1.1.1 Paragraph1.1.1",
                        "Content": "<p>ContentA</p>",
                        "Paragraphs": []
                    },
                    {
                        "Id": "N1.1.2",
                        "Title": "1.1.2 Paragraph1.1.2",
                        "Content": "<p>ContentB.</p>",
                        "Paragraphs": []
                    }
                ]
            },
            {
                "Id": "N1.2",
                "Title": "1.2 Paragraph1.2",
                "Content": "<p>Content3.</p>",
                "Paragraphs": []
            }
        ]
    };
}]);

和HTML：

<div ng-app="Application" ng-controller="TreeController">
  <script id="paragraphTmpl.html" type="text/ng-template">
    <a class="anchor" ng-attr-id="data.Id"></a>
    <h4 ng-bind="data.Title" />
    <div class="paragraph-text" ng-bind-html="data.Content"></div>
    <!-- Want to loose the div in the repeat as well -->
    <div ng-repeat="paragraph in data.Paragraphs" ng-include="paragraphTmpl.html"></div>
  </script>

  <div class="bookchapter">
    <a class="anchor" ng-attr-id="vm.chapter.Id"></a>
    <h3 ng-bind="vm.chapter.Title" />
    <div class="chapter-text" ng-bind-html="vm.chapter.Content"/>
    <div ng-repeat="paragraph in vm.chapter.Paragraphs" ng-include="paragraphTmpl.html"/>
  </div>
</div>

我也不希望在注釋中指定的重復中呈現div。 我知道怎么用淘汰賽做這個，但是找不到AngularJS。

幫助將不勝感激。

Answer 1

如果您使用子范圍來管理任意大的遞歸，我認為您將需要使用該元素。 如果它們共享相同的父元素，那么如何讓data引用不同的對象呢？

因此，我認為你有兩個選擇：創建一個具有自定義指令compile函數（我不是超級熟悉的）或硬編碼的段落有遞歸的最大深度（使用ngIf我plnkr等除去未使用的<div>的）。 這是一個很好的問題，讓你開始 。 （當然，如果您還沒有閱讀Angular關於指令的文檔將會有所幫助）。

我修復了你的代碼來做所有事情，但刪除了額外的div。

http://plnkr.co/edit/ONnvYj91HRSvboWUxDg2

<div ng-app="Application" ng-controller="TreeController">
  <script id="paragraphTmpl.html" type="text/ng-template">
    <a class="anchor" ng-attr-id="data.Id"></a>
    <h4 ng-bind="data.Title"></h4>
    <div class="paragraph-text" ng-bind-html="data.Content"></div>
    <!-- Want to loose the div in the repeat as well -->
    <ng-include
      ng-if="data.Paragraphs.length > 0" 
      onload="data = paragraph" 
      ng-repeat="paragraph in data.Paragraphs" 
      src="'paragraphTmpl.html'"></div>
  </script>

  <div class="bookchapter">
    <a class="anchor" ng-attr-id="vm.chapter.Id"></a>
    <h3 ng-bind="vm.chapter.Title"></h3>
    <div class="chapter-text" ng-bind-html="vm.chapter.Content"></div>
    <ng-include  
      ng-repeat="paragraph in vm.chapter.Paragraphs" 
      ng-if="vm.chapter.Paragraphs.length > 0"
      src="'paragraphTmpl.html'" 
      onload="data = paragraph"/>
  </div>
</div>

Answer 2

這個小提琴實現了你想要的東西http://jsfiddle.net/uBMKr/1/

關鍵是，你失蹤''圍繞在你的模板SRC名NG-包括。 這是因為沒有引號，它正在尋找對范圍變量的引用。

<ng-include src="mysrc"></ng-include> - 尋找$ scope.mysrc

<ng-include src="'mysrc'"></ng-include> - 尋找名為'mysrc'的模板

它唯一沒有做的是刪除ng-repeat <div> ，我認為你不能這樣做（至少很容易）。