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。