如何將動態文件名傳遞給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"};

有關類似的解決方案，請參見此小提琴 。