在等待数据时将微调器添加到ng-view的最佳方法?

时间:2015-06-16 10:49:21

标签: angularjs

我有ng-view我在点击时旋转我的部分页面,但是第一次我需要等待获取数据,所以我需要一些加载器,它将在ng-view内旋转直到数据到来。 如果我说<div ng-view><img src="spinner"/></div>什么都没发生

1 个答案:

答案 0 :(得分:0)

您可以创建拦截器并根据请求的URL显示微调器,例如

#
#  Requests Interceptor
#
angular.module('yourApp').factory('requestsInterceptor', [
  '$q'
  '$log'
  '$rootScope'

  ($q, $log, $rootScope) ->

    environment = mycs.App.cfg.environment
    $rootScope.showSpinner = false

    _setRequestStatus = (config, status) ->
      if config.url.indexOf('something') > -1
        $rootScope.showSpinner = status

    requestInterceptor = {
      # Intercept request
      request: (config) ->
        _setRequestStatus(config, true)

        config

      # Intercept request error
      requestError: (reason) ->

        _setRequestStatus(reason.config, false)

        $q.reject(reason)

      # Intercept respons
      response: (data) ->
          $log.info(data)

        _setRequestStatus(data.config, false)

        $q.when(data)

      # Intercept response error
      responseError: (reason) ->
        _setRequestStatus(reason.config, false)

        $q.reject(reason)
    }

    requestInterceptor
])

然后 <img src="spinner" ng-show="showSpinner"/></div>