AngularJS递归模板渲染 [英] AngularJS recursive template rendering

问题描述

我只是无法正常工作.简化所有内容并将其放在小提琴中: http://jsfiddle.net/svdoever/94aQH/1/.

I just can't get it working. Simplified everything and placed it in fiddle: http://jsfiddle.net/svdoever/94aQH/1/.

我想呈现一本书的层次结构章节，其中包含段落，段落可以包含子段落.

I want to render a hierarchical chapter of a book which containg paragraphs, and paragraphs can contain sub-paragraphs.

代码:

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中找不到它.

I also don't want a div rendered in the repeat as specified in the comment. I know how to do this with knockout, but couldn't find it for AngularJS.

我们将不胜感激.

推荐答案

如果您使用子范围来管理任意大的递归，我认为您将需要使用该元素.如果 data 都引用相同的父元素，又怎么能引用不同的对象?

If you use child scopes to manage the recursion with arbitrarily large size I think you'll need to use the element. How else can you have data refer to different objects, if they all share the same parent element?

因此，我认为您有两个选择:创建一个具有 compile 函数(我不太熟悉)的自定义指令，或者对这些段落进行硬编码以具有最大的递归深度(在我的plnkr中使用 ngIf 删除未使用的< div> .).这是一个入门的好问题.(当然，如果您还没有阅读Angular关于指令的文档，将会很有帮助)

Therefore I think you have two options: create a custom directive that has a compile function (which I'm not super familiar with) or hard-code the paragraphs to have a maximum depth of recursion (using ngIf like in my plnkr to remove the unused <div>'s). Here's a good question to get you started. (and of course reading Angular's documentation on directives will be helpful, if you haven't already).

我修复了您的代码，除了删除了多余的div以外，其他所有操作都没有.

I fixed your code to do everything but remove the extra div's.

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>

这篇关于AngularJS递归模板渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！