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>

然而，我的所有地图都在做完全相同的事情，每次都没有例外。使用路由，我建立了一个系统，我可以将有关地图的信息传递给我的{{ 1}}，并尝试以这种方式重构所述标记：

注意：文件名正在传递，其中已包含单引号。

mapController

一个小问题：上面的重构抛出了以下Angular异常：

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

按照说明（删除第二层花括号）产生了不同的错误。删除大括号时段会导致HTTP 404错误。

问题：我能以何种方式以编程方式传递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 }}]. sion的文件名？

注意：我也不担心能够在运行时更改ng-inclu ded页面。当用户导航到不同的地图时，路由系统会处理所有事务。我只是希望能够包含ng-inclu变量中的文件。

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

1 个答案: