How do I pass a dynamic filename to ng-include

Question

On a project I'm working on, I'm implementing some SVG maps. The app I'm working on has a number of locations that have two SVG documents corresponding to it: a visual map that details what an area looks like, and a 'spaces' map that has polygons that are assigned UI Bootstrap tooltip events, so that you can read information about the space. For example:

<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>

However, all of my maps are all doing that exact same thing, every time - no exceptions. Using routing, I set up a system whereby I can pass information about a map to my mapController , and attempted to refactor said markup this way:

Note: the filenames are being passed with the single-quotes already in them.

<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>

One slight problem: the refactor as above throws the following Angular exceptions:

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 }}].

Following the instructions (removing the second layer of curly braces) yielded a different error. Removing the curly braces period resulted in HTTP 404 errors.

Question: In what way can I programmatically pass a filename for ng-inclu sion?

Note: I'm not concerned about being able to change the ng-inclu ded page at runtime, either. When the user navigates to a different map, the routing system takes care of everything. I just want to be able to include a file from a controllerAs variable.

Answer 1

This should work without the curly brackets:

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

In your controller:

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

See this fiddle for a similar solution.