虽然渲染显示加载图标不工作

Question

<div ng-if="!loading"> 
    //some code 
    </div> 
    <div ng-if="loading"> 
    <loading></loading> 
    </div> 

    angular.module('indexApp.directives') 
    .directive('loading', function() { 
    return { 
     restrict: 'E', 
     replace:true, 
     template: '<div class="loading"><img src="../../../cim/images/projIcons/loading.gif" width="250px" height="45px" /></div>', 
     link: function (scope, element, attr) { 
      scope.$watch('loading', function (val) { 
       if (val) 
        $(element).show(); 
       else 
        $(element).hide(); 
      }); 
     } 
    } 
}); 

此代码的工作按预期显示加载数据时是less.In JS加载变量时被接收到的数据使其真假编写的代码。只要数据更多加载图标不显示。经过一番检查发现，只有当数据没有从后端收到时才能显示加载图标。

一旦收到数据，加载图标就会被删除。所以在更大的数据情况下，所花费的时间就是渲染。所以为了渲染它不显示加载图标。它是什么机制，我们继续加载图标，直到浏览器完成数据呈现。

Answer 1

试试这个

其实这段代码对我来说工作得很好。

app.config(function ($httpProvider) { 
      $httpProvider.responseInterceptors.push('myHttpInterceptor'); 

      var spinnerFunction = function spinnerFunction(data, headersGetter) { 
       $(".loader").show(); 
       return data; 
      }; 

      $httpProvider.defaults.transformRequest.push(spinnerFunction); 
     }); 

     //Defining Factory 
     app.factory('myHttpInterceptor', function ($q, $window) { 

      return function (promise) { 
       return promise.then(function (response) { 
        $(".loader").hide(); 
        return response; 
       }, function (response) { 
        $(".loader").hide(); 
        return $q.reject(response); 
       }); 
      }; 
     });