AngularJS - on button click nest div templates

Question

I am working on a module where I will have div elements that are nested within div elements that may also be nested in div elements. These div elements will be created by the user when they click a button. The divs may end up looking like so:

div1

1.1. div2

1.2. div3

1.3. div4
```
   1.3.1 div5

   1.3.2 div6
```

2.div7

3.div8

and so forth...

Each of these divs will simply be an html template and I want to bind the data for each of these divs, say the div has a title, and so I will bind each div.

My first plan of action was to use ng-include and simply create ng-includes dynamically by the user and that way the templates will by loaded by ng-include. However, as I have found out, nested ng-includes are not possible due to dependancy issues.

I am aware of libraries that are cooked by users that try to hack their way around doing nesting of ng-includes but I am looking for a good practice of nesting templates, while staying away from extra libraries.

Any suggestions on what would be the best way to dynamically nest templates?

@akonsu , thanks but as I explained, I am looking for a work-around using AngularJS alone, such as using different tools for templating, as opposed to ng-include — Georgi Angelov, Jun 30 '13 at 17:02
1. Are the templates the same for each `div`? 2. If not, is there a criteria that determines which template needs to be associated with which `div`? — callmekatootie, Jun 30 '13 at 17:25
The divs's structure is the same, but the content(text) and the id(classes) of the div elements may differ. — Georgi Angelov, Jun 30 '13 at 18:01
Check out http://stackoverflow.com/questions/15661289/how-can-i-make-recursive-templates-in-angularjs-when-using-nested-objects The fiddle in the accepted answer does exactly what you want, I think. — Karen Zilles, Jun 30 '13 at 18:02
I would avoid using ngInclude, and created a directive instead: http://stackoverflow.com/questions/14430655/recursion-in-angular-directives Directive may be a better choice, when dealing with a more sophisticated app structure (eg. skeletons for brunch.io) and there is a change you might want to reuse it. — Rafal Pastuszak, Jul 01 '13 at 19:43

score 1 · Answer 1 · answered Jul 12 '13 at 17:05

What I understand is you want to use a template with ng-include in a recursive way (Hope I understand well your needs)

I made you a jsfiddle to show you how I'm doing it : http://jsfiddle.net/Mm32t/3/

Below, the jsfiddle code :

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>

AngularJS - on button click nest div templates

1 Answers1