angular：第二次点击时状态变化松动 URL

Question

我有 4 个状态，每个状态代表不同的可视化。第一个可视化是地图，第二到第四个是饼图。

默认是地图可视化。我有三个图标始终显示其他 3 种可能的可视化效果。

每个状态实际上是一个嵌套状态。第一个状态是“root.map”，然后我们有“root.vis1”、“root.vis2”和“root.vis3”。

当我最初加载默认的“root.map”可视化时，首先一切正常。然后我点击一个图标，一切正常，可视化改变了。例如，浏览器中的 URL 变为“localhost:3000/#/root/vis2”。但是当我再次单击时，虽然可视化正确地更改为所选的，但我在浏览器中丢失了路径，它变成了“localhost:3000/#”。

这可能是什么原因造成的？我希望浏览器中的 URL 始终反映当前的 URL（因此可以将其添加为书签或共享）。

状态提供者配置：

$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"
      });
  }

图标：

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

控制器中的set_visualization函数：

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

Answer 1

改为：

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

或者

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

参见： href overrides ng-click in Angular.js

angular：第二次点击时状态变化松动 URL

angular: state change looses URL at second click

state

angularjs

angular-ui-router