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

How do I pass a dynamic filename to ng-include

本文关键字：ng-include 文件名 动态      更新时间：2023-09-26

在我正在进行的一个项目中，我正在实现一些SVG映射。我正在开发的应用程序有许多位置，其中有两个与之对应的SVG文档：一个是详细说明区域外观的视觉地图，另一个是具有多边形的"空间"地图，这些多边形被分配了UI引导工具提示事件，这样您就可以读取有关空间的信息。例如：

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

注意：我也不关心是否能够在运行时更改ng-inclu-ded页面。当用户导航到不同的地图时，路由系统会处理所有事情。我只想能够包含一个来自controllerAs变量的文件

这应该在没有花括号的情况下工作：

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

在您的控制器中：

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

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

相关文章：