angular: state change looses URL at second click

Question

I have 4 states, each representing a different visualization. The first visualization is a map, the second to fourth are pie charts.

The default is the map visualization. I have three icons showing always the other 3 possible visualizations.

Each of the state is actually a nested state. The first state is "root.map", then we have "root.vis1", "root.vis2", and "root.vis3".

When I initially load the default "root.map" visualization, all is fine first. Then I click on an icon, and all works fine, the visualization changes. The URL in the browser becomes "localhost:3000/#/root/vis2" for example. But when I click again, although the visualization correctly changes to the chosen one, I loose the path in the browser, and it becomes "localhost:3000/#".

What could be causing this? I'd like the URL in the browser to always reflect the current URL (so it can be bookmarked or shared).

The state provider config:

$stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "views/home.html",      
    })
    .state('root', {
      abstract: true,
      url: "/root",
      cache: false,
      templateUrl: "views/root.html"
    })
    .state('root.map', {
        url: "/map",
        cache: false,
        templateUrl: "views/map.html",
        resolve: {
          //some resolve code
        }
    })
 .state('root.vis1', {
        url: "/vis1",
        cache: false,
        templateUrl: "views/vis.html"
    })
    .state('root.vis2', {
        url: "/vis2",
        cache: false,
        templateUrl: "views/vis.html"
    })
    .state('root.vis3', {
        url: "/vis3",
        cache: false,
        templateUrl: "views/vis.html"
      });
  }

The icons:

<a class="inline vis-icons" href="#" ng-click="set_visualization('vis2');"><i class="fa fa-map-marker"></i></a>

The set_visualization function in the controller:

$scope.set_visualization = function(visualization) {
    $scope.current_vis = visualization;
    $state.transitionTo('root.' + visualization);
    return false;
  }

Do the other links (like, to `vis1`, etc...) have `href="#"` in them? If you go to `vis2` first and then back to `vis1`, do you get the same behavior? — Tom, Apr 27 '15 at 20:42
why are you using `$state.TransitionTo` instead of `$state.go`? — Claies, Apr 27 '15 at 20:44

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

Change it to:

<a class="inline vis-icons" href="" ng-click="set_visualization('vis2');">

Or

<a class="inline vis-icons" ng-click="set_visualization('vis2');">

See: href overrides ng-click in Angular.js

edited May 23 '17 at 12:14

Community

1
1

answered Apr 27 '15 at 20:44

Emma Guo

531
4
9

angular: state change looses URL at second click

1 Answers1