在angularjs中重定向状态

时间:2014-10-03 03:09:33

标签: angularjs state angular-ui-router ionic-framework rootscope

这是州配置:

angular
    .module('grabhutApp', [...])
    .config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider
            // ACCOUNT
            .state('account', {
                abstract: true,
                url: '/account',
                templateUrl: 'index.html'
            })
            .state('account.main', {
                url: '',
                templateUrl: 'views/account/account.login.html',
                controller: 'AccountController'
            })
            .
            .
            .
            // NO VIEWS
            .state('nv', {
                abstract: true,
                url: '/nv'
            })
            .state('nv.logout', {
                url: '/logout'
            })  
    });

nv及其子状态将没有物理视图或控制器 我希望它们作为调用某些功能的链接。

调用注销方法的服务:

angular.module('grabhutApp')
    .factory('$grabhutAccountService', function ($state, $grabhutDataService) {

        var methods = {     
            .
            .
            logoutUser: function () {
                $grabhutDataService.user.removeSession();
                $state.go('account.main', {}, {location: 'replace'});
            }
            .
            .
        };

        return methods;
    });

然后是退出的按钮/链接:

<a ui-sref="nv.logout" class="button icon icon ion-log-out button-large" menu-close></a>  

我想要发生的是,当状态nv.logout被触发时 必须调用$grabhutAccountService.logoutUser(),且必须重定向到'account.main'

这是我到目前为止所做的事情:
我尝试在nv.logout

中使用解决方法
.state('nv.logout', {
    url: '/logout',
    resolve: {
        logout: function ($grabhutAccountService) {
            $grabhutAccountService.logoutUser();
        }
    }
}) 

该服务已被调用但状态未重定向。所以我尝试了另一种方式。我添加了一个控制器:

.state('nv.logout', {
    url: '/logout',
    resolve: {
        logout: function ($grabhutAccountService) {
            $grabhutAccountService.logoutUser();
        }
    },
    controller: function ($scope, $state) {
        $scope.$on('$stateChangeSuccess', function () {
            $state.go('account.main');          
        });
    }   
})  

但是$stateChangeSuccess没有被解雇 所以我尝试使用rootScope:

.run(function(...., $grabhutAccountService){

    .
    .
    .
    $rootScope.logout = function(){
        $grabhutAccountService.logoutUser();
    };
    .
    .
    .

})  

并使用它:

<a ng-click="$root.logout()" class="button icon icon ion-log-out button-large" menu-close></a>

这很好用。但我担心,因为(AFAIK)rootScope会加载更多可能导致操作速度变慢的数据 此外,每当我需要某种功能时,我都需要再次在rootScope中附加功能 而且我认为这不是一个好方法。顺便说一下,我在手机中建立这个,这就是为什么内存使用非常重要的原因。

1 个答案:

答案 0 :(得分:10)

哦,你真是太近了。我重新安排了你的一些代码并得出了这个:

app.run(function($rootScope, $grabhutAccountService) {
   $rootScope.$on('$stateChangeSuccess', function (evt, toState) {
     if (toState.name === 'nv.logout') {
       $grabhutAccountService.logoutUser();
       $state.go('account.main');
     }  
   });
});

UI-Router的下一个主要版本将有很多改进的钩子来做这种事情。