AngularJS延遲視圖加載

Question

有沒有辦法延遲ui-view直到DOM加載。在那一刻我會點擊一個頁面，圖像只有一半加載。有沒有一種好的方法可以在所有元素都完全加載後才顯示新的頁面加載？

我嘗試過使用ng-cloak，但我不認爲它符合我的需求。

Answer 1

如果你正在使用角度路由，你可以使用resolve。你可以在angular routing documentation瞭解更多關於它的信息。

解決接受承諾，不會讓視圖顯示，直到這些承諾解決。

UPD：

(function() { 
    "use strict"; 
    angular.module('navigation', ['myControllers', 'ngRoute']) 
    .config(function ($routeProvider) { 
     $routeProvider 
      .when('/MyPage/', 
      { 
       controller: 'myController', 
       controllerAs: 'myCtrl', 
       templateUrl: '/AngularApp/Modules/MyPage/Views/index.html', 
       // here we create a promise and it will be resolved in 2 seconds and then page will be loaded. 
       resolve: { tmp: function ($timeout) { return $timeout(function() { }, 2000); } } 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    }); 
})(); 

在這裏，我們描述了我們的路由和創建空的承諾，模擬數據加載過程。但在現實世界中，您需要在該處撥打$http（它將從服務器獲取數據）。幸運的是$http返回承諾。

Answer 2

另一種選擇是隱藏圖像直到它們被加載。你可以通過使用一個指令作爲屬性來做到這一點（類似於ng-cloak的工作方式，但增加了功能）。你的指令會是這個樣子，第一隱藏在角編譯，然後顯示它在文檔準備元素/圖像已加載等

angular.module('app').directive('fadeUpWhenReady', ['$document', function ($document) { 
    return { 
    restrict: 'A', 
    compile: function (element, attr) { 
     element.css({ 
     "opacity": 0, 
     "-webkit-transform": "translateY(100px)", 
     "-moz-transform":  "translateY(100px)", 
     "-o-transform":  "translateY(100px)", 
     "-ms-transform":  "translateY(100px)", 
     "transform":   "translateY(100px)", 
     "-webkit-transition": "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)", 
     "-moz-transition": "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)", 
     "-o-transition":  "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)", 
     "-ms-transition":  "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)", 
     "transition":   "all 0.5s cubic-bezier(0.345, 0, 0.25, 1)" 
     }); 

     $document.ready(function() { 
     element.css({ 
      "opacity": 1, 
      "-webkit-transform": "translateY(0)", 
      "-moz-transform":  "translateY(0)", 
      "-o-transform":  "translateY(0)", 
      "-ms-transform":  "translateY(0)", 
      "transform":   "translateY(0)" 
     }); 
     }); 
    } 
    }; 
}]); 

最後，你只是用它作爲在一個屬性元素你想隱藏，例如：

<img ng-src = "{{ img.url }}" fade-up-when-ready /> 

需要注意的是，如果你的元素是一個ui-view裏面，它會編譯兩次。第一次加載頁面時，第二次在屏幕上顯示ui-view。