Add multiple transcludes to a Directive Angularjs

Question

I’m creating a menu component in Angular 1.5.8 where other components such as dropdowns, Search button and etc.

Those templates shall not be added to the code of the Directive - they will be added to HTML. Example:

    <my-directive>
         <my-directive-botao-busca>
          //esse componente tem um input de busca
         </my-directive-botao-busca>

         <my-directive-dropdown>
          //esse componente tem um menu dropdown
        </my-directive-dropdown>
    </my-directive>

This is the code of the HTML template <my-directive>:

<nav class="navbar">
    <div class="row">
        <div class="col-md-2 logo">
            EMPRESA
        </div>

        <div class="col-md-2 text-center">
            MENU

        </div>

        <div class="col-md-8">
           <!--aqui ficaria o <my-directive-botao-busca>-->
        </div>

        <div class="col-md-4">
            <!--aqui ficaria o <my-directive-dropdown>-->
        </div>

        <div class="col-md-4">

        </div>

        <div class="col-md-4">

        </div>

    </div>
</nav>

With the normal transclude the components would be in the same place. How to make the components to be separated as specified?

Answer 1

Adjust your template so it has multiple transclusion positions (Multi-slot transclusion):

<nav class="navbar">
    <div class="row">
        <div class="col-md-2 logo">
            EMPRESA
        </div>

        <div class="col-md-2 text-center">
            MENU

        </div>

        <div class="col-md-8">
            <div ng-transclude="mdbotaoBusca"></div>
        </div>

        <div class="col-md-4">
            <div ng-transclude="mdDropdown"></div>
        </div>

        <div class="col-md-4">

        </div>

        <div class="col-md-4">

        </div>
    </div>
</nav>

Its directive, then, should be amended to map the transclusion areas:

 .directive('myDirective', function() {
    return {
      restrict: 'E',
      transclude: {
        'mdbotaoBusca': '?myDirectiveBotaoBusca',
        'mdDropdown': '?myDirectiveDropdown'
      },[...]