15

Does anybody know how to change the ui-router state without changing the url? As the code below shows; in some cases the user needs to be redirected to 403 or 401 states. I would like to be able to do this redirect without changing the url.

Regards, klmdb

// make sure authGetCurrent has ran before routing starts $rootScope.$on("$locationChangeSuccess", function(event, next) { event.preventDefault(); AuthService.loadCurrentAuth().then(function(){ $urlRouter.sync(); }, function(){ console.log("BIG ERROR!!!"); }); }); // Configures $urlRouter's listener *after* your custom listener $urlRouter.listen(); $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) { var requiredLogin = (toState && toState.data ? toState.data.requiredLogin : false ), requiredGroupRights = (toState && toState.data ? toState.data.requiredGroupRights : false ); // require the user to have at least one of these rights in the current group if (requiredLogin && !AuthService.isLoggedIn()) { event.preventDefault(); $state.transitionTo('401'); return; } if(requiredGroupRights){ var i, hasRight = false; for(i=0;i<requiredGroupRights.length;i++){ if(GroupService.checkGroupRights(toParams.groupId, requiredGroupRights[i])){ hasRight = true; break; } } if(!hasRight){ event.preventDefault(); $state.transitionTo('403'); return; } } });
Improve this question

2 Answers 2

Reset to default
33

Pass the { location: false } option to $state.go

$state.go("home.foo", {}, { location: false } );

See it in action: http://plnkr.co/edit/w2aolrt9wdW3EFcEB3Lw?p=preview

var app = angular.module('demonstrateissue', ['ui.router']); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/home"); $stateProvider.state({ name: 'home', url: '/home', controller: function() { }, template: '<h1>Home</h1><div ui-view></div>'} ); $stateProvider.state({ name: 'home.foo', url: '/foo', controller: function() { }, template: '<h1>foo</h1>'} ); }); // Adds state change hooks; logs to console. app.run(function($rootScope, $state, $location) { $rootScope.$state = $state; $rootScope.$location = $location; // This function will go to home.foo state but not change url $rootScope.gotofoo = function() { $state.go("home.foo", {}, { location: false } ); }; }); 
<!DOCTYPE html> <html> <head> <script data-require="angular.js@*" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script> <script data-require="ui-router@*" data-semver="0.2.13" src="https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script> </head> <body ng-app="demonstrateissue"> <div ui-view>/div> <div class="header"> Current URL: <b>{{$location.url() }}</b> <br> Current State: <b>{{$state.current.name }}</b> <br> Current Params: <b>{{$state.params | json }}</b><br> </div> <!-- click this --> <a href ng-click="gotofoo()">Go to foo dont change url</a> </body> </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

10

If you want not create a function, you can pass a object to the attribute "ui-sref-opts" like following:

<a ui-sref="my-page" ui-sref-opts="{location:false}">My Page</a>

The following line (present in angular-ui-router.js) show the allowed attributes:

var allowedOptions = ['location', 'inherit', 'reload', 'absolute'];
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.