Question

我想使用模态（来自angular-ui-bootstrap项目）实现登录对话框。它应该覆盖整个应用程序，在背景中覆盖它，并且应该能够在AngularJS服务将变量设置为false时立即引发。

我不喜欢使用路由到登录页面，因为我想在应用程序中保留输入值。

你怎么能观察变量并正确触发模态对话框的open（）函数？

编辑：我正在使用Thrift与服务器进行通信，因此在我的情况下，查看$ http状态代码通常并不容易......

Answer 1

有几种方法可以做到这一点。由于模态本身就是服务，因此您可以直接从服务中调用open。或者，服务可以发布可以监听的事件并触发登录页面。

如果你真的想观看一个特定的变量（因为它可能会从不同的地方改变），你可以在$ rootScope上设置$ watch然后调用open。

Answer 2

您可以使用angular-ui-bootstrap模块并使用它的$ modal服务来显示登录模式，而无需重定向到任何其他页面。

您可以在angular-app演示应用安全服务中找到相同的实现 -

https://github.com/angular-app/angular-app/blob/master/client/src/common/security/security.js

Answer 3

我建议您使用事件。诀窍是观察不成功的服务调用，假设您的后端让请求失败并且正在发送拒绝访问的正确状态（403）。标志$rootScope.isLoggingIn是为了防止在链中有多个调用时出现多个LoginDialog。

未经测试的代码是我的想法，所以请测试并在发生错误/错别字时纠正

<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);
        }
    }
}

角度> = 1.2.0

angular-ui.bootstrap＆gt; = 0.7

顶级模态对话框，涵盖整个角度应用

3 个答案: