0

I'm using http-auth-interceptor to ask user authentication. I'm also using ui-router to handle the routes of my application. Until now I had a CoreController as a top level controller associated with the ui-router state: "core".

All the routes from my application are child states for this core state (which is abstract). So for instance I have core.user, core.user.show, core.settings, ...

Everything was working pretty well until I add a resolve parameter for one of my route. core.user has now have a resolve parameter that is requesting data from an API, this API return a 401 if the user is not authenticated correctly.

The problem is that the listener for the event:auth-loginRequired is in my CoreController (top level controller) which is not loaded because the resolve is not satisfy in my child state, so the event is not triggered.

I deducted that I cannot have my event listener in this CoreController and start implementing a directive to catch this event. Here is what I have at the moment:

I use to have this state to trigger my login modal:

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

And here is the directive I'm trying to build:

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

But I end up with an error I previously had in my state provider:

Template for directive 'loginDialog' must have exactly one root element. modules/user/views/login.html

Not sure how to handle this, Cheers,

Maxime

4

1 回答 1

0

而不是尝试在指令中实现模式，我刚刚重定向到登录状态，它看起来运行良好；）

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');
                });
            }
        }
    }]);
});
于 2014-06-06T06:30:44.097 回答