在$http
请求中使用Angular Material Progress circular组件的最佳方法是什么?
我目前的代码如下:
进度通告:
<md-progress-circular ng-if="determinateValue === 100" md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
$http
请求:
$scope.determinateValue = 0;
$http.get("/posts")
.success(function (data) {
$scope.posts = data;
$scope.determinateValue = 100;
})
答案 0 :(得分:20)
如果你想要一个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) {
});
}
这是我创建的一个plunker,展示了如何 Plunker
答案 1 :(得分:19)
我认为您在value
模式下不需要determinate
属性。相反,您应该使用indeterminate
模式,然后使用ngShow
显示和隐藏进度指示器。
<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>
在你的JS中
$scope.isLoading = true;
$http.get("/posts")
.success(function (data) {
$scope.isLoading = false;
});
答案 2 :(得分:2)
所有答案都是正确的,只需添加一个$http
请求异步的东西,你应该像这样使用
$scope.$apply(function(){
$scope.isLoading = false;
});
像这样整体
<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>
在你的JS中
$ scope.isLoading = true;
$http.get("/posts")
.success(function (data) {
$scope.$apply(function(){
$scope.isLoading = false;
});
});
注意: - 答案来源是接受的答案。
答案 3 :(得分:2)
你应该联系$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();
}
});
}])
答案 4 :(得分:2)
我希望这段代码有所帮助。
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;
}
答案 5 :(得分:0)
首先设置一些模型:
$scope.loading=false;
使用进度循环元素ng-show属性绑定该模型:
<md-progress-circular ng-show="loading" md-mode="indeterminate"></md-progress-circular>
在调用$ http请求之前将其设置为true,并在$ http .success:
上将其设置为false$scope.loading=true;
$http.get("/posts")
.success(function (data) {
$scope.posts = data;
$scope.loading=false;
})
希望有所帮助。
答案 6 :(得分:0)
如果您想观看帖子数据的进度,请使用uploadEventHandlers
有一个例子。
$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);
像这样显示进度循环
<md-progress-circular ng-if="ctrl.progressValue > 0 && ctrl.progressValue < 100" md-mode="determinate" value="{{ctrl.progressValue}}"></md-progress-circular>