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

Question

在我正在进行的项目中，我正在实施一些 SVG 地图。我正在处理的应用程序有许多位置，这些位置有两个 SVG 文档与之对应：一个详细说明区域外观的视觉地图，以及一个 'spaces' 具有分配的多边形的地图 UI Bootstrap 工具提示事件，以便您可以阅读有关 space 的信息。例如：

<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-inclusion 传递文件名？

注意：我也不担心能否在运行时更改 ng-included 页面。当用户导航到不同的地图时，路由系统会处理所有事情。我只想能够包含来自 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 以获得类似的解决方案。

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

How do I pass a dynamic filename to ng-include

javascript

angularjs

refactoring