AngularJS UI-Router event when changing route

Question

Using ngRoute once can hook up in event: $routeChangeStart and do different actions ...

 app.run(function ($rootScope, $location) {
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
    ................

Is it possible to achieve the same using UI-Router?

score 16 · Answer 1 · answered Apr 11 '15 at 21:47

16

Yes it's possible:

$rootScope.$on("$stateChangeStart",
    function (event, toState, toParams, fromState, fromParams) {

answered Apr 11 '15 at 21:47

karaxuna

26,752
13
82
117

Will this be called every time a route changes? Or any time the app is run for the first time? – Miguel Stevens Jul 05 '17 at 20:26
1

@Notflip every time before state changes – karaxuna Jul 06 '17 at 12:14
I ended up having to use `$stateChangeSuccess` because things weren't quite ready on `$stateChangeStart`, but thanks it got me where I needed to go. – jbobbins Jun 02 '20 at 19:10

score 1 · Answer 2 · answered Mar 08 '16 at 14:08

1

Or just use

$scope.$on("$stateChangeStart",...);

If you want this to be triggered on a single page.

answered Mar 08 '16 at 14:08

Petru

904
1
12
18

score 0 · Answer 3 · answered Jun 21 '19 at 02:34

Check this answer here, that's the correct way to fix it. Removing all listeners could have unknown effects as there might be other places where listeners are added. You need to remove the one you added, not all of them.

Check this issue: Angular $rootScope $on listeners in 'destroyed' controller keep running

Copying code here for completeness too:

animateApp.controller('mainController', function($scope, $rootScope, service) {
    $scope.pageClass = 'page-home';
    var unregister = $rootScope.$on('service.abc', function (newval) {
        console.log($scope.$id);
    });
    $scope.$on('$destroy', unregister);
});

AngularJS UI-Router event when changing route

3 Answers3