Javascript 渲染时显示加载图标不起作用 //一些代码 angular.module（'indexApp.directives'） .directive（'loading'，function（）{ 返回{ 限制：'E'， 替换：正确， 模板：“”， 链接：功能（范围、元素、属性）{ 范围$watch（'加载'），功能（val）{ if（val） $（元素）.show（）； 其他的 $（元素）.hide（）； }); } } });

这段代码可以很好地显示加载，而数据较少。在js中，编写了加载变量的代码，用于在收到数据时使其为真和假。一旦数据更多，加载图标将不显示。经过一些检查发现，只有在没有从后端接收到数据时，才能显示加载图标

一旦收到数据，加载图标将被删除。因此，在更大的数据情况下，渲染需要花费时间。因此，对于渲染，它不会显示加载图标。在浏览器完成数据呈现之前，是否有任何机制可以一直加载图标。

试试这个

实际上，这个代码对我来说很好

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

---

这对我来说不起作用。我正在检查更具体的角度。好的，我会调查一下，如果我能找到其他方法，我会让你知道。

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