当数据加载时，Angular JS快速解析和慢速控制器页面为空

I have a main.html like this . Where name card and system detail are going to remain as a constant and content will keep on changing depending upon the view .

我有这样的main.html。名片和系统细节将保持不变，内容将根据视图不断变化。

        <div ui-view="nameCard"></div>
        <div ui-view="systemDetail"></div>
        <div ui-view="content"></div>

im using ui route for routing . when i switch from one view to other , resolve happens first (The page loads first here), followed by controller initialization and it loads the data . Due to the lazy controller , users are left to view at blank page for a while. Where and how should i add the Spinner logic so the user is left to view at the spinner till the data loads. When he clicks on a button i want to enable spinner before the resolve happens and hide the spinner after the post has happened successfully .shoud i ass it in the main.html or i should add it in the content page

即时通讯使用ui路由进行路由。当我从一个视图切换到另一个视图时，先解决（此处首先加载页面），然后是控制器初始化并加载数据。由于延迟控制器，用户只能在空白页面查看一段时间。我应该在何处以及如何添加Spinner逻辑，以便用户可以在微调器上查看，直到数据加载为止。当他点击一个按钮我希望在解决问题发生之前启用微调器并在帖子成功发生后隐藏微调器.shoud我在main.html中将其添加或者我应该在内容页面中添加它

2 个解决方案

#1

You can enable spinner on state change like this

您可以像这样在状态更改上启用微调器

$scope.$on('$viewContentLoaded', function(){
  // add show spinner code here
});

and disable when content load

并在内容加载时禁用

$scope.$on('$viewContentLoaded', function(){
  // add hide spinner code here
});

#2

Suppose you have below HTML

假设你有HTML以下

<div class="icon-spinner" ng-show="displaySpin">

you can bind the $rootscope variable for spinner display in the function when the route change happens:

您可以在路由更改发生时将$ rootscope变量绑定到函数中的微调器显示：

$rootScope.$on("$stateChangeStart",
     function (event, toState, toParams, fromState, fromParams) {
         $rootScope.displaySpin = true;
     });

When the page gets loaded and the controller gets initialized, do this in the first line of controller:

当页面加载并且控制器被初始化时，在控制器的第一行中执行此操作：

$rootScope.displaySpin = false;

#1