javascript - AngularJS中临时切换 View

Question

我的问题是我有一个 Controller ，我在其中调用一个函数，该函数基本上执行返回 promise 的 http 调用。

示例 Controller :

myApp.controller('MyController', function($scope) {
    MyService.doHttp().then(function(result) {
        handleMyData(result);
    });
});

在http调用期间，我想显示一个“正在加载” View /部分，其中包含一个加载微调器，然后在请求最终完成时转发到另一个 View 。 我怎么能做这样的事呢？感谢您的帮助。

Answer 1

我处理这个问题的方法是，在我的根 index.html 页面上，我有这样的东西:

<div class="modal-loading" ng-show="loading"></div>

然后，当加载某些内容时，我在 $rootScope 上设置一个 loading 属性，并在加载完成后隐藏它。

(function(app) {
    app.controller(‘MyController’, [‘$scope’, ‘$rootScope’, '$location', ‘MyService’, 
          function($scope, $rootScope, $location, MyService) {

    $scope.loadData = function() {
        $rootScope.loading = true;

        MyService.doHttp().then(function(result) {
           handleMyData(result);
           $rootScope.loading = false;
           $location.path('/anotherView');
        }); 
      }
    });

})(angular.module(‘app’));

作为引用，模态加载的css是这样的，它用较浅的颜色覆盖整个屏幕，中间有一个旋转gif

.modal-loading {
  display: block;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 ) 
            url('../images/ajax-loader.gif') 
            50% 50% 
            no-repeat;
}