How to send and retrieve parameters using $state.go toParams and $stateParams?

by

If you want to pass non-URL state, then you must not use url when setting up your state. I found the answer on a PR and did some monkeying around to better understand.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

Then you can navigate to it like so:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

Or:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

And in HTML thusly:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

This use case is completely uncovered in the documentation, but I think it’s a powerful means on transitioning state without using URLs.

More Related Contents:

  1. AngularJS – UI-router – How to configure dynamic views
  2. How to reload the current state?
  3. Angular UI Router – Nested States with multiple layouts
  4. Nested states or views for layout with leftbar in ui-router?
  5. Confusing $locationChangeSuccess and $stateChangeStart
  6. Set Page title using UI-Router
  7. Trying to Dynamically set a templateUrl in controller based on constant
  8. angular-ui-router with requirejs, lazy loading of controller
  9. Angular UI Router Nested State resolve in child states
  10. AngularAMD + ui-router + dynamic controller name?
  11. Angular and UI-Router, how to set a dynamic templateUrl
  12. Dynamically set the value of ui-sref Angularjs
  13. Using ui-router with Bootstrap-ui modal
  14. Angular – ui-router get previous state
  15. Angular UI-Router How to create a “layout” state?
  16. Angularjs ui-router. How to redirect to login page
  17. Difference between ui-sref and $state.go in AngularJS UI-Router
  18. How would I have ui-router go to an external link, such as google.com?
  19. Injecting $state (ui-router) into $http interceptor causes circular dependency
  20. stop angular-ui-router navigation until promise is resolved
  21. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  22. ui-router dynamic template path
  23. angularjs ui-router strange behaviour with additional segment in route
  24. Angular-ui-router: ui-sref-active and nested states
  25. Why give an “abstract: true” state a url?
  26. Set URL query parameters without state change using Angular ui-router
  27. How to detect if a user clicks browser back button in Angularjs
  28. Ui-Router $state.go inside $on(‘$stateChangeStart’) is cauzing an infinite loop
  29. Prepend optional attribute in angular ui-router URL
  30. Replace self partial with another partial with angularjs ui router

Leave a Comment