0

Estou criando um componente de menu em Angular 1.5.8 onde serão inseridos outros componentes como dropdowns, botão de busca e etc.

Esses templates não serão adicionados ao código da directive - eles serão adicionados no HTML. Exemplo:

    <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>

Esse é o codigo do template HTML do <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>

Com o transclude normal os componentes ficariam no mesmo local. Como fazer para os componentes serem separados como especificado?

1 Resposta 1

1

Ajuste seu template para que ele possua posições múltiplas de transclusão (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>

A sua diretiva, então, deve ser alterada para mapear as áreas de transclusão:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .