$stateChangeSuccess not firing on href-transitioning

Question

Am I correct in my conclusion that $stateChangeSuccess won't fire unless I use $state.transitionTo? For instance:

//in app config
.state('detail.zoom', {
        url: '/zoom/{itemId}',
        templateUrl: 'detail/zoom-partial.html'
    })

//in html
<a href="#/zoom/{{item.id}}" >ZOOM IT!</a>

//in directive
scope.$state.transitionTo('detail.zoom', { itemId: item.id});

//in some controller
$scope.$on('$stateChangeSuccess', function () {alert('done transitioning!')});

the event from transitionTo triggers $stateChangeSuccess, but thats not the case for the href version. Is there a way to get events fired for both types of transition equally?

Answer 1

it looks to me like you are using a nested state. shouldn't the be a separate url for the state called "detail". meaning the full url is url: '/detail/{itemId}/zoom',

Answer 2

Try :

$rootScope.$on('$stateChangeSuccess', function () {
    alert('done transitioning!')
});

Answer 3

from version 1.0.0 of ui-router , you need to inject

$transition

service

and use this methods inside controllers:

$transitions.onStart({}, function() {});
$transitions.onSuccess({}, function() {});

Answer 4

In your directive can you try scope.$apply()

//in directive
scope.$state.transitionTo('detail.zoom', { itemId: item.id});
scope.$apply();

Answer 5

You can shorten nested URLs with using a caret ^ before:

.state('detail.zoom', {
    url: '^/zoom/{itemId}',
    templateUrl: 'detail/zoom-partial.html'
})

<a href="#/zoom/{{item.id}}" >ZOOM IT!</a>