$state.transitionTo('user.modal') does not work with ui.bootstrap dialog

[raejin]

Suppose I have two states like so:

$stateProvider
    .state('user', {
        url: '/user',
        template: 'user.html',
        controller: 'UserCtrl'
    })
    .state('user.modal', {
        url: '/user/modal',
        onEnter: function ($dialog, $state) {
            .... dialog configuration
        }
    });

If I use an "a" tag with attribute href points to "/user/modal", everything works fine the modal pops as expected. However, I tried to use $state.transitionTo('user.modal'), it would not work correctly.

As further investigation, I diff this two situations and it turns out that by using $state.transitionTo will not add the "triggerClass" and "transitionClass" to the corresponding DOM element. Thus the modal wouldn't show up correctly.

Reference of ui.bootstrap dialog docs - https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Is there any way I can fix this by hand? I just found this problem as I may dig into the code to see what is wrong with it. Any input is appreciated.

[laurelnaiad]

The $location isn't updated until after the onEnter function is called -- could you be experiencing relative URL problems with the css?

BTW, seems like maybe $state should update $location before calling onEnter?

[ksperling]

onEnter should be called identically no matter if the transition is triggered via a manual transitionTo() or $location -- the URL handlers just call transitionTo() anyway.

[laurelnaiad]

Pardon me if this is ignorance, but hasn't the URL already been changed if
the change is instigated by $urlRouter? I'm not saying onEnter isn't
called, but could it be dealing with a different url if the transition
didn't originate with a url change?

On Sat, Jun 15, 2013 at 4:27 PM, Karsten Sperling
[email protected]:

onEnter should be called identically no matter if the transition is
triggered via a manual transitionTo() or $location -- the URL handlers just
call transitionTo() anyway.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/180#issuecomment-19505240
.

[ksperling]

yes, the only difference should be when $location itself changes -- before the transition if it's started from $location, or after otherwise. Does $dialog itself look at $location?

[laurelnaiad]

I'm confused:

//in $urlRouter
//$location.path and the browser both have the new URL here, right?
          handled = rules[i]($injector, $location);
//transitionTo just happened, right?
          if (handled) {
//if state did anything else to the url, it's updated here, right?
            if (isString(handled)) $location.replace().url(handled);
            break;
          }

//in $state.transitionTo()
          if (entering.self.onEnter) {
// if we're in here because of $urlRouter, the new $location is already set,
// but if we're in here because of a direct app call to $state.transitionTo()
// the new $location is not yet set
            $injector.invoke(entering.self.onEnter, entering.self, entering.locals.globals);
          }
        }

        // Update globals in $state
        $state.$current = to;
        $state.current = to.self;
        $state.params = toParams;
        copy($state.params, $stateParams);
        $state.transition = null;

        // Update $location
        var toNav = to.navigable;
        if (updateLocation && toNav) {
          $location.url(toNav.url.format(toNav.locals.globals.$stateParams));
        }

So, what you're saying is that no matter whether transitionTo was called by the app or by $urlRouter, in either case the same $location and browser url are in effect when onEnter is invoked?

[ksperling]

No, I was agreeing with you -- the behaviour is identical except for the timing of the $location update.

But does $dialog even look at $location itself?

[laurelnaiad]

Dialog takes a templateUrl as a parameter. If that url is relative, then the effective path may be different depending on the location that is in effect when onenter is called?

[raejin]

I solved the problem using $location.path() instead of $state.transitionTo() as I couldn't find the problem. Thanks for all the inputs I appreciate it!

[laurelnaiad]

@ksperling, are you ok with moving the onEnter call to after the location is updated within transitionTo()? Might make sense to tackle this at the same time as #178.

[ksperling]

Hm well it seems a bit too shotgun to just change things around on the vague hope that it will fix $dialog integration without actually analyzing why the current behaviour is causing a problem.

Let's leave this open for now and look at it again in relation to #178

[laurelnaiad]

I wasn't talking about doing anything right away! Sorry if it sounded like I was about to do a PR or something... I intended only to provoke thought about whether it's worth looking into this, and I worded it badly.

[timkindberg]

Doesn't seem to be a recurring issue or feature request.