Javascript 在 $http 帖子中显示进度通知？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31101207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show progress circular during $http post?
提问by Michael Wilson
What is the best way to use Angular Material's Progress circularcomponent with a $httprequest?
在请求中使用 Angular Material 的Progress 循环组件的最佳方法是什么$http？
I currently have the code like this below:
我目前有如下代码：
Progress circular:
进度通报：
<md-progress-circular ng-if="determinateValue === 100" md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
$httprequest:
$http要求：
$scope.determinateValue = 0;
$http.get("/posts")
.success(function (data) {
$scope.posts = data;
$scope.determinateValue = 100;
})
回答by Helzgate
If you want a version of md-progress-circular that also inhibits the screen and has a backdrop place the md-progress-circular inside an mdDialog like this:
如果您想要一个 md-progress-circular 版本，它也可以抑制屏幕并具有背景，请将 md-progress-circular 放在 mdDialog 中，如下所示：
function showWait(){
$mdDialog.show({
controller: 'waitCtrl',
template: '<md-dialog style="background-color:transparent;box-shadow:none">' +
'<div layout="row" layout-sm="column" layout-align="center center" aria-label="wait">' +
'<md-progress-circular md-mode="indeterminate" ></md-progress-circular>' +
'</div>' +
'</md-dialog>',
parent: angular.element(document.body),
clickOutsideToClose:false,
fullscreen: false
})
.then(function(answer) {
});
}
here is a plunker i created that shows how Plunker
这是我创建的一个 plunker，它展示了Plunker如何
回答by Muhammad Reda
I don't think you need the valueattribute here with determinatemode. Instead you should use indeterminatemode, then show and hide the progress indicator using ngShow.
我认为您不需要模式的value属性determinate。相反，您应该使用indeterminate模式，然后使用ngShow.
<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>
And in your JS
在你的 JS 中
$scope.isLoading = true;
$http.get("/posts")
.success(function (data) {
$scope.isLoading = false;
});
回答by Ravinder Payal
All answers are right just add one more thing that $httprequest is asynchronous you should use like this
所有答案都是正确的，只需再添加一件事，即 $http请求是异步的，您应该像这样使用
$scope.$apply(function(){
$scope.isLoading = false;
});
And as whole like this
就像这样
<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>
And in your JS
在你的 JS 中
$scope.isLoading = true;
$scope.isLoading = true;
$http.get("/posts")
.success(function (data) {
$scope.$apply(function(){
$scope.isLoading = false;
});
});
Note:-Source of the answer is the accepted answer.
注意：-答案的来源是接受的答案。
回答by malix
You should hook up to $httpProvider's events:
你应该连接到$httpProvider的事件：
angular.module('common')
.config(['$httpProvider', function($httpProvider){
$httpProvider.interceptors.push(['$rootScope', '$q', '$timeout',
function($rootScope, $q, $timeout) {
return {
request: function(config) {
$rootScope.posting = new Date().getTime();
$rootScope.$broadcast('$postingStart', config.url);
return $q.resolve(config);
},
response: function(response) {
$rootScope.posting = false;
$rootScope.$broadcast('$postingEnd', response.config.url);
return $q.resolve(response);
},
responseError: function(response) {
$rootScope.posting = false;
$rootScope.$broadcast('$postingEnd', response.config.url);
return $q.reject(response);
}
};
}]);
}])
.run(['$mdDialog', '$rootScope', function($mdDialog, $rootScope){
var showing = false;
function showWait() {
if(showing) return;
$mdDialog.show({
controller: 'waitCtrl',
template: '<md-dialog id="plz_wait" style="background-color:transparent;box-shadow:none">' +
'<div layout="row" layout-sm="column" layout-align="center center" aria-label="wait">' +
'<md-progress-circular md-mode="indeterminate" ></md-progress-circular>' +
'</div>' +
'</md-dialog>',
parent: angular.element(document.body),
clickOutsideToClose: false,
fullscreen: false
})
.then(function(answer) {
showing = false;
});
}
$rootScope.$on('$postingStart', function(event, url) {
if (!$rootScope.postingStartTimer) {
$rootScope.postingStartTimer = $timeout(function() {
showWait()
}, 250);
}
});
$rootScope.$on('$postingEnd', function(event, url) {
if ($rootScope.postingStartTimer && posts.length === 0) {
$timeout.cancel($rootScope.postingStartTimer);
$rootScope.postingStartTimer = false;
if(!showing) return;
$mdDialog.cancel();
}
});
}])
回答by fatihturgut
I hope this code helps.
我希望这段代码有帮助。
var isLoadingShown = false;
$scope.$watch(function() {
return $http.pendingRequests.length;
},
function(newValue, oldValue) {
console.log(newValue);
if(newValue !== 0) {
if(!isLoadingShown) {
showLoading();
}
}
else hideLoading();
});
function showLoading(){
isLoadingShown = true;
$mdDialog.show({
template: '<md-dialog style="background-color:transparent;box-shadow:none;overflow: hidden !important;">' +
'<div layout="row" layout-sm="column" layout-align="center center" aria-label="wait">' +
'<md-progress-circular class="md-hue-2" md-diameter="50px"></md-progress-circular>' +
'</div>' +
'</md-dialog>',
parent: angular.element(document.body),
clickOutsideToClose:false,
escapeToClose: false,
fullscreen: false
});
}
function hideLoading(){
$mdDialog.cancel();
isLoadingShown = false;
}
回答by Burak Aky?ld?z
If you want to watch the progress of post data use uploadEventHandlers
如果您想查看发布数据的进度，请使用uploadEventHandlers
There is an example.
有一个例子。
$http({
method: 'POST',
url: '/uploadToFtp',
headers: {
'Content-Type': undefined
},
eventHandlers: {
progress: function(c) {
//console.log('Progress -> ' + c);
//console.log(c);
}
},
uploadEventHandlers: {
progress: function(e) {
//console.log('UploadProgress -> ' + e);
//console.log(e);
_self.progressValue = (e.loaded / e.total) * 100.0;
}
},
data: postData,
transformRequest: angular.identity
})
.then(callBack,errorCallBack)
.catch(errorCallBack);
Show the progress circular like this
像这样显示进度通知
<md-progress-circular ng-if="ctrl.progressValue > 0 && ctrl.progressValue < 100" md-mode="determinate" value="{{ctrl.progressValue}}"></md-progress-circular>
回答by Tomislav
First set some model:
首先设置一些模型：
$scope.loading=false;
Bind that model with progress circular element ng-show property:
将该模型与进度循环元素 ng-show 属性绑定：
<md-progress-circular ng-show="loading" md-mode="indeterminate"></md-progress-circular>
Set it to true before calling $http request and set it to false on $http .success:
在调用 $http 请求之前将其设置为 true 并在 $http .success 上将其设置为 false：
$scope.loading=true;
$http.get("/posts")
.success(function (data) {
$scope.posts = data;
$scope.loading=false;
})
Hope that helps.
希望有帮助。
