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?