Javascript AngularJS-打开按钮单击嵌套div模板

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

第一组

1.1。第二组

1.2。第三组

1.3。第四组

   1.3.1 div5

   1.3.2 div6

2.7

3.8

等等

每个div都只是一个html模板，我想为每个div绑定数据，比如说div有一个标题，所以我将绑定每个div

我的第一个行动计划是使用nginclude，用户只需动态创建nginclude，这样就可以通过nginclude加载模板。但是，正如我发现的，由于依赖性问题，嵌套的ng包含是不可能的。

我知道有一些库是由用户编写的，他们试图通过黑客攻击来嵌套ng includes，但我正在寻找一种嵌套模板的好方法，同时远离额外的库

---

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

据我所知，您希望以递归方式使用带有ng include的模板（希望我能很好地理解您的需求）

我为您制作了一个JSFIDLE，向您展示我是如何做到这一点的：

下面是JSFIDLE代码：

JS:

HTML:

{{node.title}

---

maybe@akonsu，谢谢，但正如我所解释的，我正在寻找一种单独使用AngularJS的方法，比如使用不同的工具来模板，而不是ng-include1。每个

div

的模板是否相同？2.如果没有，是否有一个标准来确定哪个模板需要与哪个

div

相关联？我想，检查一下接受答案中的小提琴是否完全符合您的要求。我会避免使用ngInclude，而是创建一个指令：在处理更复杂的应用程序结构时，指令可能是更好的选择（例如，brunch.io的skeletons）有一个变化，您可能希望重用它。

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",
         },
    ];
}

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