Как передать динамическое имя файла в ng-include

Question

В проекте, над которым я работаю, я реализую некоторые SVG-карты. Приложение, над которым я работаю, имеет несколько мест, в которых есть два соответствующих файла SVG: визуальная карта, которая описывает, как выглядит область, и карта пространств, в которой есть многоугольники, которым назначены события подсказки пользовательского интерфейса Boottrap, поэтому что вы можете прочитать информацию о пространстве. Например:

<h3 class="text-center">Fargo Building 1</h3> 

<div class="svg-map" ng-include="'Content/svg/fargo-map.svg'"></div> 
<div class="svg-overlay" ng-include="'Content/svg/fargo-map-spaces.svg'"></div> 

Однако, все мои карты все делают , что одно и то же, каждый раз - без исключений. Использование маршрутизации, я создал систему, при которой я могу передать информацию о карте на мой mapController, и попытался реорганизовать сказал разметить таким образом:

Примечание: имена файлов, передаваемые с одинарными кавычками уже в них ,

<h3 class="text-center">{{ vm.mapInfo.mapName }}</h3> 

<div class="svg-map" ng-include="{{ vm.mapInfo.mapFile }}"></div> 
<div class="svg-overlay" ng-include="{{ vm.mapInfo.mapSpaces }}"></div> 

Одна небольшая проблема: рефакторинг, как указано выше бросает следующие угловые исключения:

Syntax Error: Token '{' invalid key at column 2 of the expression [{{ vm.mapInfo.mapFile }}] starting at [{ vm.mapInfo.mapFile }}]. 
Syntax Error: Token '{' invalid key at column 2 of the expression [{{ vm.mapInfo.mapSpaces }}] starting at [{ vm.mapInfo.mapSpaces }}]. 

В соответствии с указаниями (удаление второго слоя фигурных скобок) давала другую ошибку. Удаление периода фигурных скобок привело к ошибкам HTTP 404.

Вопрос: Каким образом я могу программно передать имя файла для ng-inclu sion?

Примечание: Меня не интересует возможность изменить страницу вывода ng-inclu во время выполнения. Когда пользователь переходит на другую карту, система маршрутизации заботится обо всем. Я просто хочу включить файл из переменной controllerAs.

Answer 1

Это должно работать без фигурных скобок:

<div class="svg-map" ng-include="vm.mapInfo.mapFile"></div> 

В контроллере:

var vm = this; 
vm.mapInfo = { mapFile: "Content/svg/fargo-map.svg"}; 

Смотрите эту fiddle для подобного решения.