9

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

  1. 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-include 是不可能的。

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

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

4

1 回答 1

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>

于 2013-07-12T17:05:07.193 回答