i have 4 states, each representing different visualization. first visualization map, second fourth pie charts.
the default map visualization. have 3 icons showing other 3 possible visualizations.
each of state nested state. first state "root.map", have "root.vis1", "root.vis2", , "root.vis3".
when load default "root.map" visualization, fine first. click on icon, , works fine, visualization changes. url in browser becomes "localhost:3000/#/root/vis2" example. when click again, although visualization correctly changes chosen one, loose path in browser, , becomes "localhost:3000/#".
what causing this? i'd url in browser reflect current url (so can 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 controller:
$scope.set_visualization = function(visualization) { $scope.current_vis = visualization; $state.transitionto('root.' + visualization); return false; }
change to:
<a class="inline vis-icons" href="" ng-click="set_visualization('vis2');"> or
<a class="inline vis-icons" ng-click="set_visualization('vis2');"> 