2013-03-26 23 views
19

Si supponga di avere una direttiva di lavoro denominata <my-directive>. Fa un po 'di rendering html e gestione degli eventi, è completamente testato.Direttiva di ritorno a capo con HTML personalizzato (un'altra direttiva)

Ora vorrei concludere questa direttiva con un'altra direttiva involucro <wrapper> che renderà questo html frammento <div class="my-div">, in modo che io potessi scrivere codice come questo:

<wrapper> 
    <my-directive></my-directive> 
</wrapper> 

e avere:

<div class="my-div"> 
    <my-directive></my-directive> 
</div> 

Come si può ottenere? Ho provato alcuni approcci prima, nessuno di loro sembrava funzionare, quindi non sto pubblicando alcun codice.

+0

Se ho avuto un indizio come farlo vorrei includere SSCCE. Se non so come affrontarlo correttamente, non invierò il codice dei rifiuti - mi spiace. –

risposta

25

È possibile creare la direttiva involucro come

app.directive('wrapper', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    template: '<div class="my-div" ng-transclude></div>' 
    }; 
}); 

Demo: Plunker

19

Sembra che vi manca ng-transclude nel modello esterno e l'impostazione transclude vero nella direttiva esterno. L'attributo ng-transclude dice compilatore wheere per inserire il codice HTML interno quando transclude è impostato su true

app.directive('wrapper',function(){ 
return { 
    restrict:'E', 
    template: '<div>Outer wrapper text<div ng-transclude></div></div>', 
    transclude: true, 
    replace:true 
} 
}); 

DEMO http://plnkr.co/edit/sfbRyPZjqsTG6cuiaXZV?p=preview

+0

Grazie, ha funzionato. Dovevo accettare l'altra risposta, pensai, poiché Arun era il primo. Spero non ti dispiaccia :) –

Problemi correlati