angularjs - 无需重新加载即可获取更改的 stateParams

Question

我正在使用 angular ui 路由器制作应用程序。

当导航到总是有参数传递给它的特定状态时，我需要能够在不重新加载 View 的情况下更改 url 并更新参数。

在我的状态配置中，我使用:
重新加载搜索:假

这有效并允许我在不重新加载页面的情况下更新 URL 中的参数。

但是，我需要在 $stateParams 上收到这些更改的通知，以便我可以运行各种方法来处理新数据。

有什么建议？

谢谢，詹姆斯

Answer 1

这与我有关，所以我做了一些工作。

这是我使用 reloadOnSearch 的状态但每次更新 URL 时都会触发一个函数。

      .state('route2.list', {
          url: "/list/:listId",
          templateUrl: "route2.list.html",
          reloadOnSearch: false,
          controller: function($scope, $stateParams){
            console.log($stateParams);
            $scope.listId = $stateParams.listId;
            $scope.things = ["A", "Set", "Of", "Things"];
            //This will fire off every time you update the URL.
            $scope.$on('$locationChangeSuccess', function(event) { 
                $scope.listId = 22;
                console.log("Update");
                console.log($location.url()); 
                console.log($stateParams);    
                });
          }
      }

在控制台中返回:

Update
/route2/list/7 (index):70
Object {listId: "8"} (index):71

$locationChangeStart和 $locationChangeSuccess应该带你去你想去的地方。请记住，即使在第一次加载时，您的位置功能也将始终启动。

灵感来自 this SO 帖子和 $location documentation

编辑 2
根据 ngRoute 的 Angular 文档, $routeParams直到更改成功后才会更新。 ui-route 可能有类似的限制。由于我们正在扰乱国家的决议， $stateParams永远不会更新。你能做的就是模仿 $stateParams首先使用 $urlMatcherFactory 传递.

像这样:

      .state('route2.list', {
          url: "/list/:listId",
          templateUrl: "route2.list.html",
          reloadOnSearch: false,
          controller: function($scope, $stateParams, $state, $urlMatcherFactory){
            console.log($stateParams.listId + " :: " + $location.url());
            $scope.listId = $stateParams.listId;
            $scope.things = ["A", "Set", "Of", "Things"];
            $scope.$on('$locationChangeSuccess', function(event) { 
                $scope.listId = 22;
                //For when you want to dynamically assign arguments for .compile
                console.log($state.get($state.current).url); //returns /list/:listId
                //plain text for the argument for clarity
                var urlMatcher = $urlMatcherFactory.compile("/route2/list/:listId");
                //below returns Object {listId: "11" when url is "/list/11"} 
                console.log(urlMatcher.exec($location.url())); 
                var matched = urlMatcher.exec($location.url());
                //this line will be wrong unless we set $stateParams = matched
                console.log("Update " + $stateParams.listId);
                console.log($location.url());
                //properly updates scope.
                $scope.listId = matched.listId;
                });
          }
      })

范围实际上会更新，所以这是一件好事。要记住的是，除了设置 reloadOnSearch 之外，您正在停止所有东西的正常分辨率。至 false所以你需要自己处理几乎所有的事情。