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函数的自定义指令（我不是非常熟悉）或硬编码段落以获得最大递归深度（使用{ {1}}在我的plnkr中删除未使用的ngIf。这是a good question to get you started。（当然，如果您还没有阅读Angular在directives上的文档，将会有所帮助。

我修复了你的代码以完成所有操作，但删除了额外的div。

http://plnkr.co/edit/ONnvYj91HRSvboWUxDg2

<div>

Answer 2

这个小提琴实现了你想要的http://jsfiddle.net/uBMKr/1/

关键是你在ng-include中的模板src名称周围缺少''。这是因为没有引号，它正在寻找对范围变量的引用。

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

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

唯一不做的就是删除ng-repeat <div>，我认为你不能这样做（至少很容易）。

AngularJS递归模板渲染

2 个答案: