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进入屏幕。

AngularJS延迟视图加载

2 个答案: