显示加载覆盖，而MVC加载查看

我有一个MVC剃刀网站，并希望在视图中显示我的loading.gif它加载时。我的设置是这样的：显示加载覆盖，而MVC加载查看

的的MainPage是与客户的网格。
当我点击在网格中的客户，我切换到CustomerPage。
在CustomerPage是获取与他们的信息填写另外的表格

目前，它尽快显示加载覆盖当我点击客户在的MainPage，只有改变了，当一切都已经完成了查看加载。我不想那样。它会造成奇怪的用户体验。它需要同时加载信息

这是我_Layout.cshtml相关部分上显示网格CustomerPage：

<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"); 
         }); 
       } 
      }; 
     }]); 

})();

来源

2016-11-11 FullStackDAU

当指令被加载时，您只设置了'scope.isLoading'一次。你也需要观察这个变量（或者只是添加一个控制器代码）。 – strelok2010

我怕我甚至不知道你想看到它的控制器编码的一部分。谁处理这个项目的家伙走了，现在我来处理它（同时学习两种MVC和Angularjs，因为我去） – FullStackDAU

好了，要知道，你在路由代码中使用“解决”？ – strelok2010

确定。您需要在这里注意：

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

来源

2016-11-11 10:08:54 strelok2010

如果我用这个，装载覆盖不显示在所有:( – FullStackDAU

你全部换成“链接”我的代码代码，对不对？ – strelok2010

是我更换它与你的代码 – FullStackDAU

显示加载覆盖，而MVC加载查看

回答

相关问题