如何在加载 html 期间放置 loader 并在 angularjs 中放置 js

Question

在 js 和 html 加载期间。我必须把装载机。我可以实现这个想法吗？

如何让 AngularJS 在数据加载完成之前显示加载微调器？

当前数据来自本地数组

Answer 1

您可以简单地在默认加载图像时添加 "hide" class，然后在 ng-click 上删除 "hide"。成功后可以再次添加"hide"class。我觉得没什么大不了的。

Answer 2

您可以创建一个指令，在其中注入 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>

如何在加载 html 期间放置 loader 并在 angularjs 中放置 js

how to put loader during loading html and js in angularjs

html

javascript

loader

angularjs

angular-directive