UI Router $stateparams not registering in $state.go()

Question

I'm trying to go very simply to another state programatically and pass parameters, so:

$stateService.go('login', {
      messages: [{
        service: 'Auth',
        type: 'error',
        msg: "Your session has expired. Please log in to continue..."
      }]
    });

$stateService is to avoid circular dependancy between ui-router and state (both of which use $http)

var $stateService = $injector.get('$state');

This is the login state, as loaded into $stateProvider:

angular
    .module('kitchenapp')
    .config(['$stateProvider', function ($stateProvider) {
      $stateProvider
        .state('login', {
            url: '/login',
          templateUrl: 'views/login/login.html',
          controller: 'LoginCtrl',
          controllerAs: 'vm'
        });
     }]);

When I go to the login controller, however

angular
    .module('kitchenapp.controllers')
    .controller('LoginCtrl', LoginCtrl);

LoginCtrl.$inject = ['$location', 'Auth', 'toastr', '$stateParams', '$log'];

function LoginCtrl($location, Auth, toastr, $stateParams, $log) {

  var vm = this;

  angular.extend(vm, {

    name: 'LoginCtrl',
    messages: $stateParams.messages,
...

$stateParams.messages is empty. What am I doing wrong?

Answer 1

Any parameter which should be part of state must be defined. Either in url or via params: {} object:

 $stateProvider
    .state('login', {
      url: '/login',
      templateUrl: 'views/login/login.html',
      controller: 'LoginCtrl',
      controllerAs: 'vm',
      params: { messages : null },
    });

Check more details:

How to pass parameters using ui-sref in ui-router to controller

Answer 2

You should register "messages" parameter within the state. See https://github.com/angular-ui/ui-router/wiki/URL-Routing#important-stateparams-gotcha