Estou tendo um problema com o uso da diretiva ng-repeat em combinação com minha própria diretiva 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" />');
            }
        };
    });

VejojSFiddle

O problema aqui é que nada é substituído. O que estou tentando realizar é uma saída de campos de entrada 2x, com as tags 'x-template-field' completamente substituídas no DOM. Minha suspeita é que, como o ng-repeat está modificando o DOM ao mesmo tempo, isso não funcionará.

De acordo comisto Pergunta de estouro de pilha, a resposta aceita parece indicar que isso realmente funcionou em versões anteriores do AngularJS (?).

O element.html ('...') não funcionaria?

Embora element.html ('...') realmente injete o HTML gerado no elemento de destino, eu não quero o HTML como um elemento filho da tag de modelo, mas sim substituí-lo completamente no DOM.

Por que não envolvo minha tag de modelo com outra tag que tenha a diretiva ng-repeat?

Basicamente, pela mesma razão acima, eu não quero o meu HTML gerado como um elemento filho para a tag de repetição. Embora isso provavelmente funcione decentemente em meu aplicativo, ainda sinto que adaptei minha marcação para se adequar ao Angular e não o contrário.

Por que não estou usando a propriedade 'template'?

Não encontrei nenhuma maneira de alterar o HTML recuperado das propriedades 'template' / 'templateUrl'. O HTML que eu quero injetar não é estático, é gerado dinamicamente a partir de dados externos.

Eu sou muito exigente com a minha marcação?

Provavelmente. :-)

Qualquer ajuda é apreciada.