如何将动态文件名传递给ng-include

Question

在我正在从事的项目中，我正在实现一些SVG映射。 我正在使用的应用程序在多个位置具有与之对应的两个SVG文档：一个详细描述区域外观的可视化地图，以及一个具有为多边形分配“ UI Bootstrap”工具提示事件的多边形的“空间”地图，因此您可以阅读有关空间的信息。 例如：

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

一个小问题：上面的重构会引发以下Angular异常：

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的文件名？

注意：我也不担心能够在运行时更改包含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"};

有关类似的解决方案，请参见此小提琴 。