Question

我正在开发一个模块，我将在div元素中嵌套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嵌套的用户熟悉的库，但我正在寻找一种嵌套模板的好习惯，同时远离额外的库。

有关动态嵌套模板的最佳方法的任何建议吗？

Answer 1

我的理解是你想以递归方式使用ng-include模板（希望我能理解你的需求）

我让你成为一名小伙子，向你展示我是如何做到的：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>

Answer 2

根据我的理解，我会这样做，在点击按钮的div中创建一个div：

function whenclicked(divid){
document.getElementById(divid).innerHTML = "<div id='currentdiv2'>whatever</div>";
//the variable 'divid' is the id of the current div you want a new div to be nested   inside of
}

希望它有所帮助！：）

编辑：我知道有些人说.innerHTML是不好的做法，但它是我知道做这种事情的最简单也是唯一的方式，并且它适用于所有浏览器......

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

2 个答案: