Javascript AngularJS递归模板渲染

我就是不能让它工作。简化所有内容并将其放在小提琴中：

我想呈现一本书中包含段落的分层章节，段落可以包含子段落

代码：

angular.module（“myApp”、[]）.controller（“TreeController”、['$scope'，function（$scope）{
$scope.vm={}；
$scope.vm.chapter={
“Id”：“N7313”，
“标题”：“第1章”，
“内容”：“内容1
”，
“段落”：[
{
“Id”：“N1.1”，
“标题”：“1.1第1.1款”，
“内容”：“Content2
”，
“段落”：[
{
“Id”：“N1.1.1”，
“标题”：“1.1.1第1.1.1段”，
“内容”：“内容a
”，
“段落”：[]
},
{
“Id”：“N1.1.2”，
“标题”：“1.1.2第1.1.2段”，
“内容”：“ContentB.
”，
“段落”：[]
}
]
},
{
“Id”：“N1.2”，
“标题”：“1.2第1.2段”，
“内容”：“Content3.
”，
“段落”：[]
}
]
};
}]);

和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>

我也不希望像注释中指定的那样在repeat中呈现div。我知道如何用击倒来完成这一点，但在安格拉斯找不到

---

非常感谢您的帮助。

如果您使用子作用域来管理大小任意大的递归，我认为您需要使用元素。如果所有对象都共享同一父元素，那么如何让

数据
引用不同的对象

因此，我认为您有两种选择：创建一个具有
编译
函数（我不太熟悉）的自定义指令，或者对段落进行硬编码以获得最大的递归深度（使用
ngIf
，就像在我的plnkr中一样，以删除未使用的
）。给你。（当然，如果您还没有阅读Angular的文档，那么阅读Angular的文档会很有帮助）

我修正了你的代码，除了删除额外的div之外，什么都可以做


这把小提琴几乎达到了你想要的效果

关键是您在ng include中的模板src名称周围缺少
“”
。这是因为如果没有引号，它将查找对范围变量的引用

-正在查找$scope.mysrc

-正在查找名为“mysrc”的模板

它唯一没有做的就是删除ng repeat
，我认为您无法做到这一点（至少很容易做到）。
您好，谢谢您在双引号中使用单引号的提示，我错过了。但是，您的小提琴不会迭代到层次结构中。试图让它工作，但无法让它工作。很抱歉，我更新了链接以修复我的打字错误：）太好了，你让它工作了！很遗憾我不得不介绍那个额外的部门。。。在淘汰赛中，我用以下方法解决了问题：我忽略了它，我想要删除的div也不见了。。。你会得到接受，但有一个问题：为什么要对段落长度进行额外测试？如果数组为空，则ng repeat已起作用。有什么原因吗？谢谢！您指的是
内部的
ngIf
还是
或两者都指？嗯，可能已经不需要了。如果我还记得的话，没有它它它就冻住了。哦，那可能是当我把它作为一个指令，有一个自定义编译函数的时候。是的，所以不再需要了。抢手货
<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 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>