Question

我正在尝试构建一个指令，在页面上执行ajax请求时将显示加载图形。我已经设置了这个：

.directive('ajaxLoader', ['$http', function ($http) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };

            scope.$watch(scope.isLoading, function (loading) {
                if (!loading) {
                    element.addClass('ng-hide');
                }
            });
        }
    }
}]);

如果页面上只有一个ajax指令，它可以正常工作。我目前拥有的Html是这样的：

<div class="fixed animated fadeIn">
    <nav class="top-bar" role="navigation">
        <!-- cut for brevity -->

        <section ng-controller="ProfileController as controller">
            <div class="loading" ajax-loader></div>
            <ul ng-show="controller.user">
                <li>
                    <a href="#/security/login">
                        <h1>
                            <span class="right profile-image">

                            </span>
                            <span ng-bind="controller.user.firstName"></span><br />
                            <span class="small" ng-bind="controller.user.lastName"></span>
                        </h1>
                    </a>
                </li>
            </ul>
        </section>
    </nav>
</div>

<div class="row" ng-controller="CustomerServicesController as controller">
    <!-- cut for brevity  -->

    <section class="col-md-3">
        <h2>Recent orders</h2>

        <div class="row">
            <div class="medium-12 columns data">
                <div class="loading" ajax-loader></div>

                <table ng-hide="controller.recent.length === 0">
                    <tr>
                        <th>Account</th>
                        <th>Raised by</th>
                        <th>Reference</th>
                        <th>Detail</th>
                    </tr>
                    <tr ng-repeat="order in controller.recent" id="{{order.orderNumber}}">
                        <td><strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span></td>
                        <td ng-bind="order.raisedBy"></td>
                        <td ng-bind="order.orderNumber"></td>
                        <td ng-bind="order.description"></td>
                    </tr>
                </table>
            </div>
        </div>
    </section>
</div>

现在，似乎发生的事情是两个装载机都保持相同的时间（就像他们在消失前等待对方完成）。如果我刷新屏幕，我会看到两个加载图形都出现，然后当两个区域完成调用时，两个图像都会消失。我希望他们独立工作，有谁知道我能做到这一点？

此外，在另一个较小的问题上，数据似乎在图像消失之前瞬间加载。有没有办法让他们同时显示/隐藏？或者如果不可能，在数据加载到DOM之前让加载器消失？

angularjs ajax loading指令

0 个答案: