2014-01-12 36 views
3

首先,我已經搜索了這個問題SO。我見過的所有答案都沒有真正令我滿意。我知道解決&手動引導角度,都不是偉大的解決方案。推遲角度控制器,直到Ajax調用完成

基本上我們的應用程序是這樣構成的,在頂層,我們有一個

<body ng-controller="applicationController"> 

實例化了一堆東西。其中一部分是從我們的服務器獲取一些數據並進行設置,以便兒童控制器可以訪問它。所以這個問題有時是在服務器響應之前執行子控制器。

我們使用角度UI的UI路由器,所以我們可以利用狀態。然而,解決方案對我們來說並不是一個很好的解決方案,因爲我們有一堆路線,用戶可以從其中任何一個進入應用程序。到目前爲止,我唯一的解決方案是創建一個非常高水平的父母狀態並對此作出決定,或者決定許多州。有沒有辦法在角度控制器運行之前進行ajax調用?

回答

2

我在這裏提出了兩個答案,因爲在我看來,最優雅的解決方案是兩者的結合(無需來回重定向)。這個問題的核心是angular只允許通過路由提供者對控制器參數進行同步依賴注入。但是,我們可以將所有初始化工作都包含在單個服務中,並讓我們的主控制器依賴於此。

請參閱this plunker進行實時演示。

+0

我認爲這個解決方案似乎是最有前途的,並且非常優雅。我會繼續討論這個問題幾天,看看其他人是否有任何建議。謝謝! – wlingke

2

ng-include怎麼樣(http://docs.angularjs.org/api/ng.directive:ngInclude)?從你的HTML文件中刪除所有的子控制器的東西,並把它放在模板文件中。現在你可以從你的服務器加載一些數據,如果他們都已經到達了,設置ng-include src。

使用此解決方案,您還可以在加載階段顯示另一個模板文件。

如果你不想在另一個文件內容,你可以考慮寫一個指令,可以處理聯模板:如果您想耽誤您的控制器的實例

<script type="text/ng-template" id="my-awesome-content.html"> 
    ... 
</script> 
+0

嗯,這絕對是一個有趣的想法。我很想聽聽其他人對此的看法,如果其他人嘗試過。你認爲大型應用會有什麼性能問題嗎? – wlingke

2

,你需要在某一時刻利用promises$routeProvider

MISKO Hevery(AngularJS的創建者)回答這樣的問題在這裏:Delaying AngularJS route change until model loaded to prevent flicker

他更新了 「AngularJS入門教程」,以符合該模式;值得一讀。

幾個月前我遇到了同樣的問題;我構建了我的應用程序以遵循該原則。

基本上在你的應用程序中設置一個url /入口點來解決你的控制器的實例化。

如果您的應用程序可從其他位置訪問,請將呼叫重定向到該入口點/ URL; init的東西解決後,重定向到請求的網址。

+1

嗯,這是一個有趣的想法。我們使用角度ui路由器的父狀態做類似的事情。我們有一系列父母狀態,我們使用解決方案通過服務實例化。儘管如此,我們仍然需要單獨處理每個入口點。 – wlingke

相關問題