如何在angularjs中加载html和js期间放置加载器

Question

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

在数据完成加载之前，如何使AngularJS显示加载微调框？

当前数据来自本地数组。

Answer 1

您可以发出指令，将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>

Answer 2

您只需在默认情况下在加载图片时添加一个“隐藏”类，然后在ng-click上删除该“隐藏”即可。 成功后，您可以再次添加“隐藏”类。 我认为这没什么大不了的。