javascript - AngularJS - 在按钮上单击嵌套 div 模板

Question

我正在开发一个模块，在该模块中，我将拥有嵌套在 div 元素中的 div 元素，这些元素也可能嵌套在 div 元素中。这些 div 元素将由用户在单击按钮时创建。 div 最终可能看起来像这样:

1. div1

   1.1。分区2

   1.2。分区3

   1.3。分区4

      1.3.1 div5
   
      1.3.2 div6
   

2.div7

3.div8

等等……

这些 div 中的每一个都只是一个 html 模板，我想为每个 div 绑定(bind)数据，假设 div 有一个标题，所以我将绑定(bind)每个 div。

我的第一个行动计划是使用 ng-include 并简单地由用户动态创建 ng-include，这样模板将由 ng-include 加载。然而，正如我所发现的，由于依赖性问题，嵌套的 ng-includes 是不可能的。

我知道用户制作的库试图破解嵌套 ng-includes 的方法，但我正在寻找嵌套模板的良好实践，同时远离额外的库。

关于动态嵌套模板的最佳方式有什么建议吗？

Answer 1

我的理解是您想以递归方式使用带有 ng-include 的模板(希望我能很好地理解您的需求)

我为您制作了一个 jsfiddle 来向您展示我是如何做的:http://jsfiddle.net/Mm32t/3/

下面是 jsfiddle 代码:

JS:

function myCtrl($scope)
{
    $scope.data = [
        {
            title: "N°1 - first level",
            nodes: [
                {
                    title: "N°1 - second level",
                },
                {
                    title: "N°2 - second level",
                    nodes: [
                        {
                            title: "N°1 - third level",
                        },
                        {
                            title: "N°2 - third level",
                        },
                    ],
                },
            ],
         },
         {
            title: "N°2 - first level",
         },
    ];
}

HTML :

<script type="text/ng-template" id="common_template">
    <ul>
        <li data-ng-repeat="node in nodes">
            <h6>{{node.title}}</h6>
            <div data-ng-show="node.nodes" data-ng-include="'common_template'" data-ng-init="nodes = node.nodes"></div><!-- The best here is to use data-ui-if insted of data-ng-show but it require angular-ui-->
        </li>
    </ul>
</script>

<div data-ng-controller="myCtrl" data-ng-include="'common_template'" data-ng-init="nodes = data"></div>