Question

我有一个MVC Razor网站，并希望在加载时在View上显示我的loading.gif。我的设置如下：

MainPage 是一个包含客户的网格。
当我点击网格中的客户时，我切换到 CustomerPage 。
在 CustomerPage 上是另一个填充了其信息的网格

目前，只要我点击 MainPage 中的客户，它就会显示加载叠加层，并且只在所有内容加载完成后更改视图。我不想要那个。它带来了奇怪的用户体验。它需要在 CustomerPage 上显示网格，同时加载信息

这是 _Layout.cshtml ：

中的相关部分

<div loading-Overlay></div>
<div id="MainBody" ng-if="!isRouteLoading" ui-view="main">
    @RenderBody()
</div>

这是我的加载叠加指令：

(function () {
"use strict";
angular
    .module("myApp")
    .directive("loadingOverlay", ["$http",
        function ($http) {
            return {
                restrict: "A",
                replace: true,
                templateUrl: "./Scripts/app/loading.overlay.html",
                scope: {},
                link: function (scope, element) {
                    scope.isLoading = function () {
                        return $http.pendingRequests.length > 0;
                    };
                    scope.$watch(scope.isLoading,
                        function (value) {
                            return value ? element.addClass("show") : element.removeClass("show");
                        });
                }
            };
        }]);

})();

Answer 1

确定。你需要在这里观看：

scope.$watch(function() {
    return $http.pendingRequests.length > 0;
 }, function() {
    return value ? element.addClass("show") : element.removeClass("show");
 });

在MVC加载View时显示加载叠加

1 个答案: