[英]Promises, $mdDialog, and order of operations
我有一个带有登录页面的角度应用程序,该页面应该在处理请求时显示加载对话框。 如果在后端成功登录,则不会有任何问题,我会跳到内容页面。 不幸的是,如果登录失败,则加载对话框永远不会被隐藏。
这是我的代码的结构:
app.controller('loginController', [
'$scope',
'$http',
'$mdDialog',
function($scope, $http, $mdDialog) {
var showLoading = function(message) {
$mdDialog.show({
templateUrl: '../views/loading.html',
controller: function($scope) {
console.log('dialog created');
$scope.message = message;
}
});
};
$scope.credentials = {
username: '',
password: ''
};
$scope.handleLogin = function() {
showLoading('Logging in...');
$http.post('/login', $scope.credentials).then(function success() {
// go to content page
}, function error(response) {
console.log('login failed');
}).then(function() {
console.log('hide');
$mdDialog.hide();
});
};
}
]);
在我的输出中,我看到:
login failed
hide
dialog created
我想知道是不是我误解了$mdDialog
工作方式,还是$mdDialog
服务内部存在某种超时问题。
从输出中可以看到,仅在登录失败后才创建对话框。 在“显示”操作完成后,尝试发出http请求:
app.controller('loginController', [
'$scope',
'$http',
'$mdDialog',
function($scope, $http, $mdDialog) {
var showLoading = function(message, onShown) {
$mdDialog.show({
templateUrl: '../views/loading.html',
controller: function($scope) {
console.log('dialog created');
$scope.message = message;
},
onComplete:onShown
});
};
$scope.credentials = {
username: '',
password: ''
};
$scope.handleLogin = function() {
showLoading('Logging in...', function(){
$http.post('/login', $scope.credentials).then(function success() {
// go to content page
}, function error(response) {
console.log('login failed');
}).finally(function() {
console.log('hide');
$mdDialog.hide();
});
});
};
}
]);
在then方法中,可以放置三个函数。
您必须放入“ $ mdDialog.hide();” 在第二个功能中,而不是第三个。 第三个功能仅在您发出长请求并希望指示请求的进度百分比时使用。
这样的事情必须工作:
$http.post('/login', $scope.credentials).then(function success() {
// go to content page
}, function error(response) {
console.log('login failed');
$mdDialog.hide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.