Angularjs如何在ajax请求上加载屏幕?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

使用Angularjs,我需要显示一个加载屏幕(一个简单的微调),直到ajax请求完成。

提问于
用户回答回答于

而不是设置一个范围变量来指示数据加载状态,最好有一个指令为你做所有事情:

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

有了这个指令,你需要做的就是给任何加载动画元素一个'加载'属性:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

你可以在页面上有多个加载微调器。在哪里以及如何布置这些纺纱器取决于您,指令会自动为你打开/关闭它。

用户回答回答于

使用简单的ng-show方法和一个bool。

HTML

<div ng-show="loading" class="loading"><img src="...">LOADING...</div>
<div ng-repeat="car in cars">
  <li>{{car.name}}</li>
</div>
<button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button>

ANGULARJS

  $scope.clickMe = function() {
    $scope.loading = true;
    $http.get('test.json')
      .success(function(data) {
        $scope.cars = data[0].cars;
        $scope.loading = false;
    });
  }

当然,可以将加载框html代码移动到指令中,然后在$ scope.loading上使用$ watch。在这种情况下:

HTML

<loading></loading>

ANGULARJS

  .directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="..."/>LOADING...</div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
  })

http://plnkr.co/edit/AI1z21?p=preview

扫码关注云+社区