angularjs - switch - ¿Cómo pasar HTML a la directiva angular?

ng-class

Question

Intento crear una directiva angular con una plantilla, pero tampoco quiero perder el HTML dentro de la div. Por ejemplo, aquí es cómo me gustaría llamar a mi directiva desde HTML:

<div my-dir>
<div class="contents-i-want-to-keep"></div>
</div>

Entonces, está mi directiva:

app.directive(''myDir'', [ ''$compile'', function($compile) {
return {
restrict: ''E'',
link: function(scope, iElement, iAttrs){
// assigning things from iAttrs to scope goes here
},
scope: ''@'',
replace: false,
templateUrl: ''myDir.html''
};
}]);

y luego está myDir.html, donde defino un nuevo elemento:

<div class="example" style="background: blue; height: 30px; width: 30px"></div>

Incluso cuando establezco replace en false, pierdo el div interno de contents-i-want-to-keep - mi comprensión de los documentos angulares era que esto se agregaría después de mi plantilla. ¿Hay alguna forma de preservar esto (posiblemente a través de mi función de enlace?) Para que el resultado sea

<div class="example" style="background: blue; height: 30px; width: 30px">
<div class="contents-i-want-to-keep"></div>
</div>

¡Gracias!

Answer 1

Tendrá que usar ng-transclude , agregar transclude: true en sus opciones de directiva y agregar ng-transclude a su plantilla:

<div class="example" style="…" ng-transclude></div>`

Este plunkr tiene un ejemplo sobre cómo usar ng-transclude con una plantilla, para mantener el elemento dom original.

http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf