Reemplazar ng-include node con template?

Algo nuevo para angular. ¿Es posible reemplazar el nodo ng-include por el contenido de la plantilla incluida? Por ejemplo, con:

Test

El html generado es:

 

Test

Test

Pero lo que quiero es:

 

Test

Test

Tenía este mismo problema y aún quería las características de ng-include para incluir una plantilla dinámica. Estaba construyendo una barra de herramientas Bootstrap dinámica y necesitaba que el marcado de limpiador para los estilos CSS se aplicara correctamente.

Aquí está la solución que surgió para aquellos que están interesados:

HTML:

 

Directiva personalizada:

 app.directive('includeReplace', function () { return { require: 'ngInclude', restrict: 'A', /* optional */ link: function (scope, el, attrs) { el.replaceWith(el.children()); } }; }); 

Si se usara esta solución en el ejemplo anterior, establecer scope.dynamicTemplatePath en ‘test.html’ daría como resultado el marcado deseado.

Entonces, gracias a @ user1737909, me di cuenta de que ng-include no es el camino a seguir. Las directivas son el mejor enfoque y más explícito.

 var App = angular.module('app', []); App.directive('blah', function() { return { replace: true, restrict: 'E', templateUrl: "test.html" }; }); 

En html:

  

Tuve el mismo problema, a mi hoja de estilo css de terceros no le gustó el elemento DOM adicional.

Mi solución fue súper simple. Simplemente mueva el ng-include 1 hacia arriba. Entonces, en lugar de

  

Simplemente lo hice:

   

Apuesto a que esto funcionará en la mayoría de las situaciones, incluso si técnicamente no es lo que la pregunta está haciendo.

Otra alternativa es escribir su propia directiva de reemplazo / inclusión simple, por ej.

  .directive('myReplace', function () { return { replace: true, restrict: 'A', templateUrl: function (iElement, iAttrs) { if (!iAttrs.myReplace) throw new Error("my-replace: template url must be provided"); return iAttrs.myReplace; } }; }); 

Esto se usaría de la siguiente manera:

 

Esta es la forma correcta de reemplazar a los niños

 angular.module('common').directive('includeReplace', function () { return { require: 'ngInclude', restrict: 'A', compile: function (tElement, tAttrs) { tElement.replaceWith(tElement.children()); return { post : angular.noop }; } }; }); 

La siguiente directiva extiende la funcionalidad de directivas nativas ng-include.

Agrega un detector de eventos para reemplazar el elemento original cuando el contenido está listo y cargado.

Úselo de la manera original, simplemente agregue el atributo “reemplazar”:

  

o con notación de atributo:

 

Aquí está la directiva (recuerde incluir el módulo ‘incluir-reemplazar’ como dependencia):

 angular.module('include-replace', []).directive('ngInclude', function () { return { priority: 1000, link: function($scope, $element, $attrs){ if($attrs.replace !== undefined){ var src = $scope.$eval($attrs.ngInclude || $attrs.src); var unbind = $scope.$on('$includeContentLoaded', function($event, loaded_src){ if(src === loaded_src){ $element.next().replaceWith($element.next().children()); unbind(); }; }); } } }; }); 

Me gustaría ir con una solución más segura que la proporcionada por @Brady Isom.

Prefiero confiar en la opción de carga dada por ng-include para asegurarme de que la plantilla esté cargada antes de tratar de eliminarla.

 .directive('foo', [function () { return { restrict: 'E', //Or whatever you need scope: true, template: '', link: function (scope, elem) { scope.replace = function () { elem.replaceWith(elem.children()); }; } }; }]) 

No hay necesidad de una segunda directiva ya que todo se maneja dentro del primero.