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

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