如何在angularjs中加载html和js时放置loader

how to put loader during loading html and js in angularjs

本文关键字：js loader html angularjs 加载      更新时间：2023-09-26

在js和html加载期间。我必须把装载机。所以我可以实现任何想法。

如何让AngularJS显示加载微调器，直到数据完成加载？

当前数据来自本地数组。

您可以发出指令，在那里注入http服务，并监视其挂起的请求：

(function() {
    'use strict';
    angular
        .module('yourApp')
        .directive('loader', loader);
    /**
     * Defines loading spinner behaviour
     *
     * @param {obj} $http
     * @returns {{restrict: string, link: Function}}
     */
    function loader($http) {
        return {
            restrict: 'A',
            link: function(scope, element, attributes) {
                scope.$watch(function() {
                    return $http.pendingRequests.length;
                }, function(isLoading) {
                    if (isLoading) {
                        $(element).show();
                    } else {
                        $(element).hide();
                    }
                });
            }
        };
    }
})();

并使用它：

<span class="spinner" data-loader></span>

默认情况下，您只需在加载图像时添加一个"隐藏"类，然后单击ng即可移除该"隐藏"。成功后，您可以再次添加"隐藏"类。我认为这没什么大不了的。

相关文章：