Get stateParams on change without rebooting

Question

I am making an application using angular ui router.

When moving to a specific state that always has parameters passed to it, I need to be able to change the URL and update the parameters without reloading the view.

In my state configuration, I use: reloadOnSearch: false

This works and allows me to update the parameters in the URL without reloading the page.

However, I need to be notified of these changes in $ stateParams so that I can run various methods that will do something with the new data.

Any suggestions?

Thanks James

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 post $location

2 Angular ngRoute, $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, .

Answer 2

Romans, ,

/**
 * Get parameters from URL and return them as an object like in ui-router
 */
eventaApp.service( 'getStateParams', ['$urlMatcherFactory', '$location', '$state', function(     $urlMatcherFactory, $location, $state ){
  return function() {

    var urlMatcher = $urlMatcherFactory.compile($state.current.url);
    return urlMatcher.exec($location.url());

  }

}]);