如何將動態文件名傳遞給ng -include

在我正在開發的項目上，我正在實施一些SVG地圖。我正在處理的應用程序有許多位置有兩個對應於它的SVG文檔：詳細說明區域外觀的可視地圖，以及具有分配UI Bootstrap工具提示事件的多邊形的「空間」貼圖，因此您可以閱讀有關該空間的信息。例如：如何將動態文件名傳遞給ng -include

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

一個小問題：如上述的重構引發以下角例外：

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代碼頁。當用戶導航到不同的地圖時，路由系統負責處理所有事情。我只想能夠包含來自controllerAs變量的文件。

來源

2015-04-02 Andrew Gray

只需使用表達式，即'ng-include =「vm.mapInfo.mapFile」'等 – 2015-04-02 14:14:26

這應該沒有大括號的工作：

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

在你的控制器：

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

了類似的解決方案請參見本fiddle。

來源

2015-04-02 14:14:06 eladcon

您的修復的另一個方面是我必須刪除傳入控制器的路徑中的單引號。但是，它的工作原理！謝謝。 – 2015-04-02 15:05:12

如何將動態文件名傳遞給ng -include

回答

相關問題