How to build directive accept the same nested directive inside it?

Question

Maybe the title of the question is not clear.
What I want to do is to create a directive that I can use like this:

<menu-item title="var1" state="var2">
   <menu-item title="var3" state="var4">
   </menu-item>
   <menu-item title="var5" state="var6">
      <menu-item title="var7" state="var8">
      </menu-item>
   </menu-item>
</menu-item>

And the directive menuItem will have to generate the proper html of course.

You need to use `ngTransclude: true` and add a ``-element to the template of your directive. Just search for `ngTransclude` and you'll find loads of guides and Stack Overflow questions on the topic. — Nikolaj Dam Larsen, Jan 11 '18 at 19:39
Possible duplicate of [Recursion in Angular directives](https://stackoverflow.com/questions/14430655/recursion-in-angular-directives) — shaunhusain, Jan 11 '18 at 20:02
Not actually positive if the above is what you're looking for but sounds aweful similar. If not then the other comment about transclude probably applies since it allows you to put the original contents of some element into the template that replace those contents when the directive is processed. — shaunhusain, Jan 11 '18 at 20:04

score 0 · Answer 1 · answered Jan 11 '18 at 20:20

The answer was as easy as adding transclude: true' to the directive and then addng-transclude` to the template of this directive where you want the children to be rendered:

(function () {
    'use strict';

    angular.module('myModule')
        .directive('menuItem', menuItem);

    menuItem.$inject = [];

    function menuItem() {
        var menuItemTemplate =
            '<li>\
              <a ui-sref="{{state ? state : "javascript:;"}}">\
                <span class="title"> {{label}} </span>\
              </a>\
              <ul ng-transclude class="sub-menu">\
              </ul>\
             </li>';

        var directive = {
            restrict: 'E',
            replace: true,
            template: menuItemTemplate,
            transclude: true,
            scope: {
                state: '@',
                label: '@'
            },
            link: function (scope, element, attrs) {
            }
        };

        return directive;
    }

})();

Now we use it like I mentioned in the question

How to build directive accept the same nested directive inside it?

1 Answers1