80

这是一个两部分的问题：

  1. 我正在使用 $stateProvider.state() 中的 resolve 属性在加载控制器之前获取某些服务器数据。在此过程中如何显示加载动画？

  2. 我有子状态也使用 resolve 属性。问题是 ui-router 似乎想在加载任何控制器之前完成所有解析。有什么办法可以让父控制器在解决它们的解析后加载，而不必等待所有子控制器解析？对此的回答也可能会解决第一个问题。

4

11 回答 11

71

编辑：这是一个更简单的解决方案，经过测试并且运行良好：

在我的主控制器中，我只有

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});

当状态更改完成时，这会在我们即将进入有任何问题的状态并隐藏它时显示微调器。您可能想要添加一些检查状态层次结构（即，如果正在加载的父状态解决了某些问题，也显示微调器）但是这个解决方案对我来说很好。

这是我的旧建议作为参考和替代方案：

  1. 在您的应用程序控制器中，侦听stateChangeStart事件并检查您是否要切换到要在解析期间显示微调器的状态（请参阅https://github.com/angular-ui/ui-router/wiki/Quick -参考#wiki-events-1 )

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    if (toState.name == 'state.with.resolve') {
        $scope.showSpinner();  //this is a function you created to show the loading animation
    }
})

  2. 当您的控制器最终被调用时，您可以隐藏微调器

    .controller('StateWithResolveCtrl', function($scope) {
    $scope.hideSpinner();
})

$stateChangeError您可能还希望通过侦听事件并在处理错误时隐藏动画来检查解析期间可能发生的任何错误。

当您在控制器之间分配微调器的逻辑时，这并不完全干净，但这是一种方式。希望能帮助到你。

于 2014-01-26T21:20:46.837 回答
22

我开发了以下解决方案，非常适合我。

1.添加如下app.run

app.run(function($rootScope){

    $rootScope
        .$on('$stateChangeStart', 
            function(event, toState, toParams, fromState, fromParams){ 
                $("#ui-view").html("");
                $(".page-loading").removeClass("hidden");
        });

    $rootScope
        .$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){ 
                $(".page-loading").addClass("hidden");
        });

});

2. 将加载指示器放在 ui-view 的正上方。将 id="ui-view" 添加到 ui-view div。

<div class="page-loading">Loading...</div>
<div ui-view id="ui-view"></div>

3.将以下内容添加到您的CSS

.hidden {
  display: none !important;
  visibility: hidden !important;
}

笔记：

A. 上面的代码会在两种情况下显示加载指示符1）第一次加载 Angular 应用程序时2）更改视图时。

B. 如果您不希望在第一次加载 Angular 应用程序时（在加载任何视图之前）显示指示器，则将隐藏类添加到加载 div，如下所示

<div class="page-loading hidden">Loading...</div>
于 2014-11-13T14:36:48.720 回答
16

由于网络访问，我发现使用angular-loading-bar非常适合长时间解析。

于 2014-12-03T16:53:17.310 回答
8

一旦属性解决，如何将内容添加到将由 ui-router 填充的 div？

在你的index.html

<div ui-view class="container">
    Loading....
</div>

解析属性时，用户现在将看到“正在加载...”。一旦一切准备就绪，内容将被 ui-router 替换为您的应用程序内容。

于 2013-12-04T09:24:23.820 回答
7

我使用仅在$http有待处理请求时才显示的动画 gif。

在我的基本页面模板中，我有一个导航栏和导航栏控制器。控制器的相关部分如下所示：

controllers.controller('NavbarCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.hasPendingRequests = function () {
            return $http.pendingRequests.length > 0;
        };
    }]);

我的html中对应的代码是：

<span class="navbar-spinner" ng-show="hasPendingRequests()">
    <img src="/static/img/spinner.gif">
</span>

我希望这会有所帮助！

于 2013-11-22T09:19:14.153 回答
4

我的想法是在转换状态之间的状态图上走路径$stateChangeStart并收集所有涉及的视图。然后每个ui-view指令都会监视相应的视图是否涉及转换并'ui-resolving'在其元素上添加类。

plunker演示引入了两个根状态：first和second，后者有两个子状态second.sub1和second.sub2。该州second.sub2还针对footer属于其祖父母的视图。

于 2015-01-20T10:58:20.367 回答
3

当页面在任何状态（任何页面）之间导航时，这是全局加载器，放入 app.js 

.run(
    ['$rootScope',
        function($rootScope) {
            $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = true;
            })
            $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = false;
            })
        }
    ])

在 html 中：

<div ng-show="preloader">Loading...</div>
于 2017-02-01T08:53:21.297 回答
2

使用$stateChangeStart和 类似的已经被弃用，取而代之的是 Transition Hooks。因此，对于 Stefan Henze 的回答，更新后的版本将是：

$transitions.onStart({}, function(transition) {
  if (transition.to().resolve) {
    $scope.showSpinner();
  }
});

$transitions.onSuccess({}, function(transition) {
  if (transition.to().resolve) {
    $scope.hideSpinner();
  }
});

您可以在您的父控制器中使用它。记得注入$transitions——

.controller('parentController',['$transitions',function($transitions){...}]);

另外，请记住，resolve作为空对象的 a 仍然会 render transition.to().resolve == true，所以不要resolve在状态声明中留下空的占位符。

于 2018-06-13T17:23:19.187 回答
2

我更喜欢使用指令来匹配任何加载活动，主要是为了保持我的代码库清洁

angular.module('$utilityElements', [])
.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
      restrict: 'A',
      template: '<div id="oneloader" class="hiddenload">loading...</div>',
      replace: true,
      compile: function (scope, element, attrs) {
        $timeout(function(){
          $rootScope
              .$on('$stateChangeStart',
                  function(event, toState, toParams, fromState, fromParams){
                      $("#oneloader").removeClass("hiddenload");
              });

          $rootScope
              .$on('$stateChangeSuccess',
                  function(event, toState, toParams, fromState, fromParams){
                      //add a little delay
                      $timeout(function(){
                        $("#oneloader").addClass("hiddenload");
                      },500)
              });
        }, 0);
      }
    }
  }]);
于 2016-01-14T14:13:37.080 回答
1

在路由器中使用 resole 时使用视图的我的想法非常棒。尝试这个。

//edit index.html file 
<ion-nav-view>
    <div ng-show="loadder" class="loddingSvg">
        <div class="svgImage"></div>
    </div>
</ion-nav-view>

// css file

.loddingSvg {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
}

.svgImage {
    background: url(../img/default.svg) no-repeat;
    position: relative;
    z-index: 99;
    height: 65px;
    width: 65px;
    background-size: 56px;
    top: 50%;
    margin: 0 auto;
}

// edit app.js

 .run(function($ionicPush, $rootScope, $ionicPlatform) {




        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = true;
            });

        $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = false;
            });

});
于 2016-11-10T11:25:45.350 回答
0

如果有人正在使用，在加载下一个视图之前ngRoute等待，并使用ui，您可以执行以下操作：resolveangular-bootstrap-ui

app.config([
  "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    return $routeProvider.when("/seasons/:seasonId", {
      templateUrl: "season-manage.html",
      controller: "SeasonManageController",
      resolve: {
        season: [
          "$route", "$q", "$http", "$modal", function($route, $q, $http, $modal) {
            var modal, promise, seasonId;
            modal = $modal.open({
              backdrop: "static",
              template: "<div>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title\">\n      Loading...\n    </h3>\n  </div>\n  <div class=\"modal-body\">\n    <progressbar\n      class=\"progress-striped active\"\n      value=\"'100'\">\n    </progressbar>\n  </div>\n</div>",
              keyboard: false,
              size: "lg"
            });
            promise = $q.defer();
            seasonId = $route.current.params.seasonId;
            $http.get("/api/match/seasons/" + seasonId).success(function(data) {
              modal.close();
              promise.resolve(data);
            }).error(function(data) {
              modal.close();
              promise.reject(data);
            });

            return promise.promise;
          }
        ]
      }
    });
  }
]);
于 2016-06-16T02:46:50.267 回答