Skip to content

no state change when navigating to a URL where only parameters change #289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
metamatt opened this issue Aug 1, 2013 · 7 comments
Closed

no state change when navigating to a URL where only parameters change #289

metamatt opened this issue Aug 1, 2013 · 7 comments

Comments

@metamatt
Copy link

metamatt commented Aug 1, 2013

I'm trying to use ui-router and ran into a problem where if I attempt a transition between a state with params and the same state with different params, nothing happens.

In my use so far, I'm replacing existing use of ngRoute with ui-router components, so all the states have (distinct) URLs, and I'm using <a href> to transition between states.

Say I have a state users, defined something like state('users', { url: '/users', /* controller, template, etc */ }) and a state users.view, defined something like state('users.view', { url: '/:username', ... }). If we navigate from / to /users/foo, we see a state transition into users.view with params including { username: 'foo' }. If we then navigate to /users/bar, there's no further state transition.

In fact, I see urlRouterProvider's internal update() routine run and match the route and invoke the when handler added by $StateProvider.registerState(). But that handler's ($state.$current.navigable != state) test decides there's nothing to do. So no state transition happens, and as far as I can tell nothing else happens.

(I saw #46, but this seems to be different. And I tried putting a watch on $state.params from the controller, but the watch doesn't fire.)

If I comment out that test at line 119 of state.js, so that it always invokes $state.transitionTo, it works more like I'd expect.

Here's a minimal repro case:

<html>
<head>
<script src='./angular.js'></script>
<script src='./angular-ui-router.js'></script>
<script>

var testApp = angular.module('testApp', [ 'ui.state' ])
   .config(function($locationProvider, $stateProvider) {
      //$locationProvider.html5Mode(true);      
      $stateProvider
         .state('child', {
            template: '<p>Child state with param = "{{ param }}"</p>',
            url: '/:param',
            controller: childController
         });
   })
   .run(function($rootScope) {
      $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
         console.log('$stateChangeStart:', arguments);
      });
      $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
         console.log('$stateChangeSuccess:', arguments);
      });
   });

function childController($scope, $state) {
   console.log('invoke childController with $state', $state);
   $scope.param = $state.params.param;

   $scope.$watch('$state.params.param', function() {
      console.log('childController watch param change to', $state.params.param);
   });
}

</script>
</head>

<body ng-app='testApp'>

<p>Choose param for child state:
   <a href='#/good'>good</a>
   <a href='#/bad'>bad</a>
   <a href='#/ugly'>ugly</a>
</p>

<ui-view>

</body>
</html>
@nateabele
Copy link
Contributor

Please add your use case to a Plunkr and add the link here. Thanks.

@metamatt
Copy link
Author

metamatt commented Aug 1, 2013

Happy to, but a dumb question first. Is there an easier/better way to use a dev version of ui-router in a plunker, short of uploading my own built angular-ui-router.js to the individual plunker?

The thing is, the bug I'm filing seems to be a regression since 0.0.1; it works fine with http://angular-ui.github.io/ui-router/release/angular-ui-router.js and fails with the one I build myself.

@metamatt
Copy link
Author

metamatt commented Aug 1, 2013

The "is this a different state" test I'm sparring with is relatively new.

@metamatt
Copy link
Author

metamatt commented Aug 1, 2013

http://plnkr.co/edit/6tzEa96dJlpqPGKMQ4BM

@nateabele
Copy link
Contributor

Is there an easier/better way to use a dev version of ui-router in a plunker, short of uploading my own built angular-ui-router.js to the individual plunker?

Nope, that's the way for now.

Thanks for putting the test together. Should be able to get it worked out over the weekend.

@morgs32 morgs32 mentioned this issue Aug 10, 2013
Closed
@jeffwhelpley
Copy link

Absolutely hilarious. I was just about to enter a new issue for this until I saw the fix has already been committed. Thanks, @nateabele

nateabele added a commit to nateabele/ui-router that referenced this issue Aug 28, 2013
@nateabele
URL transitions on param-only state change, fixes angular-ui#289.
a954e0b
@nateabele nateabele mentioned this issue Sep 10, 2013
Closed
@kubino
Copy link

kubino commented Sep 20, 2013

perfect, exactly what I needed when migrated from original angular routing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@nateabele @metamatt @jeffwhelpley @kubino