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?

Instigation

Answer 1

Yes it's possible:

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

Distraction

Will this be called every time a route changes? Or any time the app is run for the first time? – Tearing

@Notflip every time before state changes – Distraction

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. – Lipoma

Answer 2

Or just use

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

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

Reviviscence

Answer 3

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

Rotorua