Angular UI-router - Not populating params despite $stateParams get object

Question

Im using angular and angular router-ui. I want to make use of dynamic url params.

This is how Im using it:

          .state('index.domain', {
            url: '/domain',
            template: "<div ui-view> Home Domain page </div>"
          })

            .state('index.domain.id', {
              url: '/:domainId',
              resolve: {
                domainId: function($stateParams){
                  return $stateParams.domainId;
                }
              },
              templateUrl: "./development/administration/domain.html",
              controller: function(domainId){
                console.log(domainId);
              }
            })

Im calling the routing with the following invocation:

$state.go('index.domain.id', {"domainId": domainId});

It DOES execute the resolve and $stateParams get an object with domainId. Despite of that it does not get into the controller. The URL/:domainId does not changed either.

If I change in the browser the URL to point to URL/RANDOM_DOMAIN_ID (where RANDOM_ID is a domainId valid number) it executes the resolve and goes to the controller.

Am I missing something on the $state.go call?

Answer 1

There is a working plunker

I used the above state def as is:

.state('index', {
    url: '/index',
    template: "<div ui-view> Index </div>"
  })
.state('index.domain', {
    url: '/domain',
    template: "<div ui-view> Home Domain page </div>"
 }) 
.state('index.domain.id', {
  url: '/:domainId',
  resolve: {
    domainId: function($stateParams){
      return $stateParams.domainId;
    }
  },
  templateUrl: "development/administration/domain.html",
  controller: function(domainId){
    console.log(domainId);
  }
})

And made just few adjustments in the calling side - and this is working:

<a ui-sref="index.domain.id({domainId: 1})">...
<button ng-click="$state.go('index.domain.id', {domainId: 22});">...

Check it here