Receive an event on direct page visit from address bar, Angular JS - ui-router

Question

guys I am working on an angular js app which uses ui-router for deep linking and routing. I want to set up a variable on the $rootScope every time a state is visited/changed. I am able to accomplish that on subsequent state transitions via listening to $stateChangeSuccess but since the app is deep linked, I want to set the same variable when a state is directly hit from the address bar.

When I hit a specific URL from address bar e.g. Home/Summary/Change, $stateChangeSuccess doesn't fire hence I am not able to set the value.

Any suggestions on how I can listen to EACH state visit on my $rootScope.

Stewie · Accepted Answer · 2013-11-30 08:13:33Z

1

You may use combination of $locationChangeStart and $route.current:

$rootScope.$on('$locationChangeStart', function (event, next, current) {
  if(!$route.current) {
    $rootScope.myVar = ...
  }
});

answered Nov 30, 2013 at 8:13

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Umair Khan Over a year ago

still not able to receive $locationChangeStart event when i access #/Home/Summary/Change directly

Mohammad Umair Khan · Accepted Answer · 2013-12-04 06:57:06Z

0

I found a work around for this. I was not able to get $stateChangeSuccess on the first visit to a page so on initialization i called the function explicitly.

example code

var handle = function(){
//do something ...
}

$scope.$on('$stateChangeSuccess', handle); // call handle on each state change
handle(); // will only be called on initialization

might not be the cleanest way but it works

answered Dec 4, 2013 at 6:57

Mohammad Umair Khan

5152 gold badges9 silver badges25 bronze badges

Comments

Sebastian · Accepted Answer · 2014-07-11 08:58:28Z

0

In the meantime they have implemented a $urlRouterProvider where you can add a when:

app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index   
    $urlRouterProvider.when('', '/index');

    // You can also use regex for the match parameter
    $urlRouterProvider.when(/aspx/i, '/index');
})

So if you like to have Home/Summary/Change matching a state, you would write something like $urlRouterProvider.when('Home/Summary/Change','myhomestate') then the $stateChangeSuccess should fire correct. For more details about that provider look at https://github.com/angular-ui/ui-router/wiki/URL-Routing#urlrouterprovider

answered Jul 11, 2014 at 8:58

Sebastian

2,9441 gold badge28 silver badges32 bronze badges

Collectives™ on Stack Overflow

Receive an event on direct page visit from address bar, Angular JS - ui-router

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related