Question

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

样本控制器：

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

在http通话期间，我想要显示一个“正在加载”的内容。 view / partial包含一个加载微调器，然后在请求最终完成时转发到另一个视图。我怎么能这样做？谢谢你的帮助。

Answer 1

我处理这个的方式是，在我的根index.html页面上，我有这样的事情：

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

然后，我在加载某些内容时在loading设置了$rootScope属性，并在加载完成后将其隐藏。

(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;
}

Answer 2

在范围内创建布尔值，使用标记隐藏/显示加载器

myApp.controller('MyController', function($scope, $rootScope) {
    $rootScope.showLoader = true; //using rootScope so that html code can be put anywhere in app
    MyService.doHttp().then(function(result) {
        handleMyData(result);
        $rootScope.showLoader = false;
    });
});

在html中添加加载程序代码：

<div ng-show="showLoader" >
   loader content here
</div>

暂时在angularjs中切换视图

2 个答案: