Angularjs如何检测控制器中的所有内容加载完成，而内部几乎没有Ajax调用？ [英] Angularjs how to detect all content loaded finish in controller while there is few ajax call inside?

问题描述

我的目的是在控制器启动后显示一个微调对话框，并且在控制器内部，有很少的ajax可以提取数据到 ng-repeat 和其他模型中。

愚蠢的方式：

  $ scope.global.loading = true; 
 
 $ http.post（'fetchData.do'，''，config 
）.then（function successCallback（response）{
 $ scope.global.loading = false; 
}，函数errorCallback（响应）{
 $ scope.global.loading = false; 
}）; 
  

显然这不是一个好方法，我所有的ajax都是异步的，而且我只有一个加载微调器 div ，也就是说，有一段时间，微调者永远不会消失。 （抱歉，我错了，问题应该在之前消失，即使有其他ajax仍在运行）

我发现一些库拦截angularjs $ http 调用，但其概念与我的相同，所以它不起作用。

在开始时启动微调器的任何好方法Angularjs控制器的所有ajax完成后解雇它？或者甚至更好，所有的 DOM 数据（ng-repeat）都准备好了吗？原因是，我不想让用户只需点击一些尚未准备好的 DOM 。

解决方案

不要重新发明轮子。

  npm / bower安装角加载条 - 保存
  

您的所有http请求都会被拦截，并会出现一个加载条，直到每个请求都被解析为止。

图书馆不建议覆盖（防止与页面交互），但你可以这样做：

  #loading -bar {
 position：fixed; 
 z-index：99999; 
宽度：100％; 
身高：100％; 
 pointer-events：all; 
 cursor：wait; 
} 
  

I have checked several answer, but none is actually same as my scenario.

My purpose is to show a spinner dialog once the controller start, and inside the controller, there are few ajax to fetch data to feed into ng-repeat and other model.

I did in a stupid way:

$scope.global.loading = true;

$http.post('fetchData.do', '', config
        ).then(function successCallback(response) {     
            $scope.global.loading = false;
        }, function errorCallback(response) {
            $scope.global.loading = false;
        });

Obviously this is not a good way, all my ajax is asynchronous, and I only have one loading spinner div, meaning, it might have problem some time the spinner never disappear away. (sorry I was wrong, the problem should be disappear earlier before even there is other ajax still running)

I found some library to intercept angularjs $http call, but its concept is same as mine, so it doesn't work.

Any good way to start a spinner at the beginning of Angularjs controller and dismiss it after all the ajax finish? Or even better, all the DOM data (ng-repeat) is ready? The reason is, I don't want to let user simply click on some DOM that is not fully ready yet.

解决方案

Don't reinvent the wheel.

npm/bower install angular-loading-bar --save

All your http requests will be intercepted and a loading bar will appear until each one is resolved.

The library doesn't propose an overlay (to prevent interacting with the page) but you can do it this way:

#loading-bar {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  pointer-events: all;
  cursor: wait;
}

这篇关于Angularjs如何检测控制器中的所有内容加载完成，而内部几乎没有Ajax调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！