我想使用模式（来自 angular-ui-bootstrap 项目）实现登录对话框。 它应该覆盖整个应用程序，将其覆盖在背景中，并且应该能够在 AngularJS 服务将变量设置为 false 时立即升高。
我不喜欢使用路由到登录页面，因为我想在应用程序中保留输入值。
如何正确地观察变量并触发模态对话框的 open() 函数？
编辑：我正在使用 Thrift 与服务器进行通信，因此在我的情况下观察 $http 状态代码通常并不容易......
【问题讨论】：
标签： javascript angularjs angular-ui angular-ui-bootstrap
有几种方法可以做到这一点。由于模态本身就是一项服务，因此您实际上可以直接从您的服务中调用 open 。或者，该服务可以发布一个可以监听并触发登录页面的事件。
如果你真的想观察一个特定的变量（因为它可能会从不同的地方改变），你可以在 $rootScope 上设置一个 $watch ，然后调用 open。
【讨论】：
您可以使用angular-ui-bootstrap 模块并使用它的 $modal 服务来显示登录模式，而无需重定向到任何其他页面。
您可以在 angular-app 演示应用程序安全服务中找到相同的实现 -
https://github.com/angular-app/angular-app/blob/master/client/src/common/security/security.js
【讨论】：
我建议您为此使用事件。诀窍是假设您的后端让请求失败并发送正确的拒绝访问状态（403），以观察不成功的服务调用。标志$rootScope.isLoggingIn 是为了防止在链中存在多个调用时出现多个LoginDialogs。
未经测试的代码是我的想法，所以请测试它并在出现错误/拼写错误时更正
<html ng-app="myApp">
</html>
angular.module('myApp', ['ui.bootstrap.modal'])
.run(function($rootScope, $modal) {
$rootScope.isLoggingIn = false;
$rootScope.$on('showLoginDialogEvent', function (e, evtArgs) {
$rootScope.isLoggingIn = true;
$modal.open({
templateUrl: 'views/loginView.html',
controller: 'LoginDialogController'})
.result.then(function(){
$rootScope.isLoggingIn = false;
});
}
});
angular.module('requestInterceptor', [])
.config(function ($httpProvider) {
$httpProvider.interceptors.push('RequestInterceptor');
})
.factory('RequestInterceptor', function ($q, $rootScope) {
return {
'request': function (config) {
return config || $q.when(config);
},
'requestError': function(rejection) {
return $q.reject(rejection);
},
'response': function(response) {
return response || $q.when(response);
},
'responseError': function(rejection) {
if(!$rootScope.isLoggingIn && rejection.status === 403)
$rootScope.$broadcast('showLoginDialogEvent');
return $q.reject(rejection);
}
}
}
【讨论】：