在angularjs中重定向状态

本文介绍了在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.