HFA HFA - 3 months ago 71
AngularJS Question

ui-sref params option with $state.href not working as expected

I have a state definition like this:

$stateProvider.state('password', {
url: '/password',
templateUrl: 'password.html',
controller: 'PasswordController',
controllerAs: 'ctrl',
params: {
accountNumber: {
value: null,
squash: true
}
},
});


I need to reference this state with its
href
rather than using
ui-serif
directive, How can I set
params.accountNumber
inside href?

This doesn't work:

$state.href('password', {accountNumber: $scope.accountNumber})


When I change this line
url: '/password',
to ` url: '/password?accoutNumber', and remove this part

params: {
accountNumber: {
value: null,
squash: true
}
},


$state.href
works just fine.

Answer

To be able to generate URL with $state.href and pass parameter...

  • such parameter must be part of url definition
  • declaring it just in params: {} will result in href - not containing it, not passing it

there is adjusted state definition:

  .state('password', {
    url: '/password/:accountNumber',
    templateUrl: 'password.html',
    controller: 'PasswordController',
    controllerAs: 'ctrl',
    params: {
        accountNumber: {
            value: null,
            squash: true
        },
      },               
  });

There is a working plunker

ORIGINAL part, related to typo

The $state.href() call seems to be ok... just a state definition could be wrong:

$stateProvider.state('password', {
    //Url: '/password',
    url: '/password',
    ...

The url setting is case sensitive. See state.href doc here:

href(stateOrName, params, options)