$transitions when using to and from not working

[ilDon]

Issue

• ui-router version: 1.0.0.beta1
• expected behaviour: when using $transitions, callback function is expected to be executed when to and from parameters are matched
• actual behaviour: callback is never executed.

Description

I have encountered a problem when using $transitions and declaring the to and from parameters.

The code in the callback was never executed:

$transitions.onSuccess( { to: 'acontrollerbasedstate', from: '*' }, function() {
    // I've also tried { to: '*', from: '*' }
    console.log('running');
    // do stuff
});

I've also testes all methods:

$transitions.onBefore( { to: '*', from: '*' }, function() {
  console.log('onBefore');
});
$transitions.onEnter( { to: '*', from: '*' }, function() {
  console.log('onEnter');
});
$transitions.onError( { to: '*', from: '*' }, function() {
  console.log('onError');
});
$transitions.onExit( { to: '*', from: '*' }, function() {
  console.log('onExit');
});
$transitions.onFinish( { to: '*', from: '*' }, function() {
  console.log('onFinish');
});
$transitions.onRetain( { to: '*', from: '*' }, function() {
  console.log('onRetain');
});
$transitions.onStart( { to: '*', from: '*' }, function() {
  console.log('onStart');
});
$transitions.onSuccess( { to: '*', from: '*' }, function() {
  console.log('onSuccess');
});

Unfortunately nothing ever gets printed in the console.

I thought I was doing something wrong, which might well be the case, so I posted on SO this question.

As I had no answers, I made some tests, and I found out that without declaring to or from, it works:

$transitions.onStart( {}, myFunction);

$transitions.onSuccess({}, function(){
    // here I use $scope.current.name, which for my purposes, works fine for now
});

Could it be a bug?

[christopherthielen]

The { to: '*', from: '*' } object is a HookMatchCriteria. Here's the API doc: https://ui-router.github.io/docs/latest/interfaces/transition.hookmatchcriteria.html

Each property (to, from, exiting, retained, and entering) can be state globs, a function that takes a state, or a boolean (see HookMatchCriterion)

All properties are optional. If any property is omitted, it is replaced with the value true, and always matches.

Two things to note:

1. Because it's a string, the '*' is interpreted as a Glob. In a Glob, a single star matches only one level deep. Use '**' glob to match any state at the current level or any ancestor state.

2. You can use a function or a boolean instead, like { to: () => true } or { to: true }

I found out that without declaring to or from, it works:

3. The default value for any missing key is true, so it's expected behavior for {} to match all transitions.

This is primarily a docs issue, I think.

[ilDon]

Thanks for the clarification, it would certainly be helpful to add such info to the docs.

I must add though that I had also tried to use the exact state name (e.g. "app.admin-panel.dashboard"), but it wasn't working either.

[christopherthielen]

I had also tried to use the exact state name (e.g. "app.admin-panel.dashboard"), but it wasn't working either.

That should indeed work. Maybe post more details about that.

[christopherthielen]

Docs notes to self:

• TransitionService/IHookRegistry: Replace glob * examples with **
• ng1-state-events docs: update and check they generate correctly
• Glob: write docs and add copious examples

[ilDon]

I' was trying with this exact code, which was not executing the callback when navigating to the state triangular.admin-default.dashboard:

$transitions.onSuccess( { to: 'triangular.admin-default.dashboard', from: '*' }, function() {
    console.log('running');
});

Perhaps is the -?

[christopherthielen]

should be { to: 'triangular.admin-default.dashboard', from: '**' } or simply { to: 'triangular.admin-default.dashboard' }

[ilDon]

Sorry about that!

[Riccardo-Andreatta]

I have the same issue

        $transitions.onBefore({to: 'main-authenticated.**'}, function (trans) {
            console.log('transition onBefore');
            var auth = trans.injector().get('AuthenticationService');
            if (!auth.isLoggedIn()) {
                // User is not authenticated
                // Redirect to a new Target State
                return trans.router.stateService.target('login');
            }
        });

even if I try with onStart or every other events, nothing is printed on console.

main-authenticated is an abstract state that has loads of different children that are not absolute.

Any suggestion?

[christopherthielen]

@Riccardo-Andreatta where does this code (which registers the hook) live? Are you sure it's being called? When is it called?