Question

我正在使用http-auth-interceptor来询问用户身份验证。我也使用ui-router来处理我的应用程序的路由。到目前为止，我有CoreController作为与ui-router州相关联的顶级控制器：“核心”。

我的应用程序中的所有路由都是此核心状态的子状态（这是抽象的）。例如，我有core.user，core.user.show，core.settings，...

在我为其中一条路线添加resolve参数之前，一切都运转良好。 core.user现在有一个resolve参数从API请求数据，如果用户未经过正确的身份验证，此API将返回401.

问题是event:auth-loginRequired的监听器位于我的CoreController（顶级控制器）中，由于在我的子状态下解析不满足，因此未加载，因此事件未被触发。

我扣除了我在这个CoreController中没有我的事件监听器并开始实现一个指令来捕获这个事件。这就是我现在所拥有的：

我使用此状态来触发我的登录模式：

            $stateProvider
            .state("main.login", {
                onEnter: function($stateParams, $state, $modal) {
                    $modal.open({
                        templateUrl: "/js/modules/user/views/login.html",
                        controller: 'LoginController',
                        backdrop: 'static',
                        keyboard: false,
                        windowClass: 'app-modal-login'
                    }).result.then(function(result) {
                        if (true == result) {
                            $state.go("main.home.map.data");
                        }
                    });
                }
            })
            ;

这是我正在努力建立的指令：

    require(['app', 'modules/user/index'], function(app) {
    app.directive('loginDialog', ['$modal', function($modal) {
        return {
            templateUrl: 'modules/user/views/login.html',
            restrict: 'A',
            replace: true,
            controller: 'LoginController',
            link: function(scope, element, attributes, controller) {

                console.log('Directive loaded');

//                scope.$on('event:auth-loginRequired', function() {
//                    element.modal('show');
//                });
//
//                scope.$on('event:auth-loginConfirmed', function() {
//                    element.modal('hide');
//                    scope.credentials.password = '';
//                });
            }
        }
    }]);
});

但我最终得到了我之前在我的州提供商处发生的错误：

指令'loginDialog'的模板必须只有一个根元素。模块/用户/视图/ login.html的

不知道如何处理这个，干杯，

马克西姆

Answer 1

相反，为了尝试在指令中实现模式，我只是重定向到登录状态，看起来它运行良好;）

require(['app'], function(app) {
    app.directive('loginDialog', ['$state', function($state) {
        return {
            restrict: 'A',
            replace: true,
            link: function(scope, element, attributes, controller) {
                scope.$on('event:auth-loginRequired', function() {
                    $state.transitionTo('main.login');
                });
            }
        }
    }]);
});

如何使用带有指令的http-auth-interceptor

1 个答案: