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

这段代码工作正常，显示加载时数据较少。在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);
                });
            };
        });

渲染显示加载图标时不起作用

1 个答案: