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

【问题标题】：AngularJS - on button click nest div templatesAngularJS - 在按钮上单击嵌套 div 模板
【发布时间】：2013-06-27 20:44:02
【问题描述】：

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

div1

1.1。 div2

1.2。 div3

1.3。 div4
```
   1.3.1 div5

   1.3.2 div6
```

2.div7

3.div8

等等……

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

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

我知道一些库是由试图破解 ng-includes 嵌套的用户编写的，但我正在寻找一种嵌套模板的良好做法，同时远离额外的库。

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

【问题讨论】：

github.com/angular-ui/ui-router 也许
@akonsu ，谢谢，但正如我解释的那样，我正在寻找单独使用 AngularJS 的解决方法，例如使用不同的模板工具，而不是 ng-include
1.每个div 的模板是否相同？ 2.如果没有，是否有一个标准来确定哪个模板需要与哪个div关联？
查看stackoverflow.com/questions/15661289/… 我认为已接受答案中的小提琴正是您想要的。
我会避免使用 ngInclude，而是创建了一个指令：stackoverflow.com/questions/14430655/… 在处理更复杂的应用程序结构（例如，brunch.io 的骨架）时，指令可能是更好的选择，并且有您可能希望重复使用的更改。

标签： javascript angularjs

【解决方案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>

【讨论】：