Tengo un problema con el uso de la directiva ng-repeat en combinación con mi propia directiva personalizada.

HTML:

<div ng-app="myApp">
  <x-template-field x-ng-repeat="field in ['title', 'body']" />
</div>

JS:

angular.module('myApp', [])
    .directive('templateField', function () {
        return {
            restrict: 'E',
            compile: function(element, attrs, transcludeFn) {
                element.replaceWith('<input type="text" />');
            }
        };
    });

VerjSFiddle

El problema aquí es que nada es reemplazado. Lo que estoy tratando de lograr es una salida de campos de entrada 2x, con las etiquetas 'x-template-field' completamente reemplazadas en el DOM. Mi sospecha es que dado que ng-repeat está modificando el DOM al mismo tiempo, esto no funcionará.

De acuerdo aesta En la pregunta de desbordamiento de pila, la respuesta aceptada parece indicar que esto realmente funcionó en versiones anteriores de AngularJS (?).

¿No funcionaría element.html ('...')?

Mientras element.html ('...') realmente inyecta el HTML generado en el elemento de destino, no quiero que el HTML sea un elemento secundario de la etiqueta de la plantilla, sino que lo reemplace completamente en el DOM.

¿Por qué no envuelvo mi etiqueta de plantilla con otra etiqueta que tenga la directiva ng-repeat?

Básicamente, por la misma razón que la anterior, no quiero que mi código HTML generado como elemento secundario se repita en la etiqueta. Si bien probablemente funcionaría decentemente en mi aplicación, sentiría que he adaptado mi marca para que se ajuste a Angular y no al revés.

¿Por qué no estoy usando la propiedad 'plantilla'?

No he encontrado ninguna forma de alterar el HTML recuperado de las propiedades 'template' / 'templateUrl'. El HTML que quiero inyectar no es estático, se genera dinámicamente a partir de datos externos.

¿Soy demasiado exigente con mi marca?

Probablemente. :-)

Cualquier ayuda es apreciada.