使用角度樣式加載CSS

我的頁面加載並應用在其包含的CSS鏈接之一中定義的CSS。我也有一個角度控制器，它可以調用某些服務來獲取一些數據。這些數據還會根據返回的數據類型應用css樣式（通過角度）。使用角度樣式加載CSS

問題在於，由於服務必須等待數據以便操縱頁面上的樣式，所以出現了延遲應用於頁面樣式的情況。

頁面加載應用CSS ...等待數據從服務調用返回，然後應用一些更多的樣式。

有沒有一種方法可以在頁面上的任何樣式應用之前等待數據返回，無論是來自css html鏈接還是角度指令，以避免此延遲/加載問題？

2016-03-21 Srmuhs

您可以在角路由解決之前預加載數據。

實施例：

$routeProvider 
       .when('/bar/foo/', 
       { 
        templateUrl: '', 
        controller: Ctrl, 
        resolve: { 
         data: ['service', function (service) { 
           return service.function(); 
          } 
         ], 
        } 
       })

進樣'data'如在控制器的依賴性。在這種情況下，數據在頁面呈現之前可用。

來源

2016-03-21 17:07:43 rupampatel

我喜歡這種方式，謝謝。但是，我遇到了一個問題。當我在我的routeProvider中使用resolve屬性時，它似乎不會維護req.headers與如果我直接從控制器調用該路由。例如，我有一個工廠$資源路由，我在控制器中調用返回一些數據，首先驗證令牌頭（使用req.header）。這很好。但是當我從解析屬性中找到同樣的$資源路由時，它會將其放入$資源路由中，但似乎沒有攜帶相同的請求。信息並在令牌驗證步驟失敗。想法？ – Srmuhs

我認爲你會混淆兩個不同的東西：1.使用$ http服務進行API調用時，請求標頭會顯示圖片。 $ http被消耗在你的'服務'功能中，這與路由解析沒有任何關係。 2. routeProvder幫助在應用程序中配置路由。要點擊源自$ httpProvider的所有請求，可以使用攔截器。例如：$ httpProvider.defaults.headers.common ['X-Requested-With'] ='XMLHttpRequest'; $ httpProvider.defaults.headers.common ['X-XSRF-Token'] = angular.element（'[name =「__ RequestVerificationToken」]'）。val（）; – rupampatel

對不起，你是對的。我沒有意識到我有另一個解決方案設置該標題，並且我正在跳過它。謝謝你的幫助。標記爲已回答 – Srmuhs

您的服務如何「應用更多的風格」？是通過向DOM添加鏈接標記嗎？

您可以手動存儲您在臨時變量中獲得的不同樣式，並且當您知道您擁有全部樣式時，將它們一次全部應用。

另一個不錯的選擇是隱藏整個頁面，例如使用一些徽標或進度條，或者只是一個普通的白色頁面，直到應用了所有樣式。在您的頂級控制器中，輸入一些$scope.pageReady，一旦您的服務返回了所有CSS，您將設置爲true。同時，隱藏內容：

<div ng-show = "pageReady"> ... </div>

來源

2016-03-21 16:31:22 floribon

使用角度樣式加載CSS

回答

相關問題