AngularJS - Почему не заменяет: истинная работа с свойством templateUrl?

У меня есть довольно простая директива, что я хочу загрузить шаблон из отдельного HTML файла. Я хочу, чтобы HTML заменил директиву, и поэтому я добавляю свойство replace: true в директиву. Однако, когда я это делаю, шаблон не включается вообще.

Я создал jsFiddle, где вы можете это увидеть. Если вы используете Firebug или что-то для проверки DOM, вы можете видеть, что, когда он использует только свойство template, он заменяет элемент. Если вы отпустите replace: true, вы увидите HTML-код в templateUrl, который будет добавлен к элементу foo. Однако, как только я добавляю replace: true с templateUrl, все, что я вижу, это <foo></foo> в DOM.

Есть ли какая-то причина, по которой вы просто не можете использовать эти два свойства вместе? Я далек от эксперта с javascript, поэтому вся информация о том, что здесь происходит, будет очень благодарна.

Ответ 1

Убедитесь, что содержимое вашего html в templateUrl имеет ровно один корневой элемент. Это не проблема, когда replace: false, но становится проблемой при replace: true, и вы увидите эту ошибку консоли (с FireBug):

Error: Template must have exactly one root element.

Вот jsFiddle этого не работает (с двумя корневыми элементами), а другой с ним работает.

Ответ 2

Хороший вопрос. Если я не ошибаюсь, вы хотите использовать "transclude"

http://jsfiddle.net/dandoyon/AsVp8/1/

Transclude позволяет вам смешать ваш шаблон с тем, что находится в HTML. Возможно, вы захотите дать документу еще один взгляд и найти этот вариант.

ура!