在angularjs中重定向状态 [英] Redirect state in angularjs

问题描述

这是状态配置：

  angular 
 .module（'grabhutApp '，[...]）
 .config（函数（$ 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' }）; 
} 
。
。
}; 
 
返回方法; 
}）; 
  

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

 < a ui-sref =nv.logoutclass =button icon icon ion-log-out button-largemenu-close>< ; / A> 
  

我希望发生的是，当州 nv.logout 被触发了$
$ grabhutAccountService.logoutUser（）必须被调用，并且必须重定向到'帐户。 main'

这是我到目前为止所做的：

我试图在 nv.logout

  .state（'nv。注销'，{
 url：'/ logout'，
 resolve：{
 logout：function（$ grabhutAccountService）{
 $ grabhutAccountService.logoutUser（）; 
} 
} 
}）
  

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

  .state（'nv.logout'，{
 url：'/ logout'， 
 resolve：{
 logout：function（$ grabhutAccountService）{
 $ grabhutAccountService.logoutUser（）; 
} 
}，
 controller：function（$范围，$ state）{
 $ scope。$ on（'$ stateChangeSuccess'，function（）{
 $ state.go（'account.main'）; 
}）; 
} 
}）
  

但是 $ stateChangeSuccess 没有被解雇。

所以我尝试使用rootScope：

  .run（function（....，$ grabhutAccountService）{
 
。
。
。
 $ rootScope.logout = function（） {
 $ grabhutAccountService.logoutUser（）; 
}; 
。
。
。
 
}）
  

使用它如下：

<一个ng-click =$ root.logout（）class =button icon icon ion-log-out button-largemenu-close>< / a>

这很好用。但是我很担心，因为（AFAIK）rootScope会加载更多可能导致操作速度变慢的数据。

此外，每当我需要某种类似上面的函数时，我都必须再次在rootScope中附加函数。 >
我认为这不是一个好方法。顺便说一句，我在手机屏幕中构建这个，这就是内存使用如此重要的原因。

解决方案

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

  app.run（function（$ rootScope，$ grabhutAccountService）{
 $ rootScope。$ on（'$ stateChangeSuccess'，function（evt，toState）{
 if（toState.name ==='nv.logout'）{
 $ grabhutAccountService.logoutUser（）; 
 $ state.go（'account.main'）; 
} 
}）; 
}）; 
  

UI-Router的下一个主要版本将有很多改进的钩子用于做这类事情。 / p>

This is the state configuration:

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

The nv and its sub states will have no physical views or controllers.
I want them to serve as links that calls certain functions.

Service for calling logout methods:

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

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

        return methods;
    });

Then a button/link for logout:

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

What I want to happen is that, when state nv.logout was triggered the
$grabhutAccountService.logoutUser() must be called and must redirect to 'account.main'

Here is what I've done so far:
I tried to use resolve in nv.logout

.state('nv.logout', {
    url: '/logout',
    resolve: {
        logout: function ($grabhutAccountService) {
            $grabhutAccountService.logoutUser();
        }
    }
}) 

The service was called but state did not redirect. So I tried another way. I added a controller:

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

But $stateChangeSuccess is not being fired.
So I tried to use the rootScope:

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

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

})  

And the use it like this:

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

This works fine. But I'm worrying since (AFAIK) rootScope loads more data which could cause slower operation.
Besides, whenever I need some kind of function like above, I would have to attach function in rootScope again.
And I think that's not a good approach. BTW, I'm building this in phonegap that's why memory usage is so important.

解决方案

Ooooh you're so close. I rearranged some of your code and arrived at this:

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

The next major version of UI-Router will have much improved hooks for doing this sort of thing.

这篇关于在angularjs中重定向状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！