У меня проблема с использованием директивы ng-repeat в сочетании с моей собственной пользовательской директивой.

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" />');
            }
        };
    });

ВидетьjSFiddle

Проблема здесь в том, что ничего не заменено. То, что я пытаюсь сделать, это вывод 2х полей ввода, с тегами 'x-template-field', полностью замененными в DOM. Я подозреваю, что, поскольку ng-repeat изменяет DOM одновременно, это не сработает.

Согласно сэто Вопрос переполнения стека, принятый ответ, кажется, указывает на то, что он действительно работал в более ранних версиях AngularJS (?).

Не будет ли element.html ('...') работать?

Хотя element.html ('...') фактически внедряет сгенерированный HTML-код в целевой элемент, я не хочу, чтобы HTML-код был дочерним элементом тега шаблона, а скорее полностью заменил его в DOM.

Почему бы мне не обернуть свой шаблонный тег другим тегом с директивой ng-repeat?

По той же причине, что и выше, я не хочу, чтобы мой сгенерированный HTML-код был дочерним элементом к повторяющемуся тегу. Хотя в моем приложении это, вероятно, сработало бы прилично, я все равно чувствую, что адаптировал разметку под Angular, а не наоборот.

Почему я не использую свойство 'template'?

Я не нашел способа изменить HTML, полученный из свойств 'template' / 'templateUrl'. HTML-код, который я хочу внедрить, не является статичным, он динамически генерируется из внешних данных.

Я слишком разборчив в разметке?

Вероятно. :-)

Любая помощь приветствуется.