ng-repeat в сочетании с пользовательской директивой
У меня проблема с использованием директивы 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-код, который я хочу внедрить, не является статичным, он динамически генерируется из внешних данных.
Я слишком разборчив в разметке?Вероятно. :-)
Любая помощь приветствуется.