CODEWITHSUNDEEP
angularjsangular-ui-routerionic-framework
Misha Moroshko
Misha Moroshko

Reputation: 171321

Cannot get ui-router state params

Consider the following ui-router configuration:

$stateProvider
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })
  .state('app.feed', {
    url: "/feed",
    views: {
      'menuContent': {
        templateUrl: "templates/feed.html",
        controller: "FeedCtrl"
      }
    }
  })

I have the following link in my app:

<a ui-sref="app.feed({ feedId: 5 })">My Link</a>

I'm trying to get the feedId in state params:

angular.module('MyApp').controller('FeedCtrl', function($state) {
  console.log($state.params);
});

But, unfortunately, $state.params is always {}.

What am I doing wrong?

BONUS QUESTION

I expect FeedCtrl to be initialised every time I click on the link, i.e. every time the state is changed to app.feed. So, If I change between app.feed state and some other state multiple times, I expect the console.log above to run multiple times. But, it looks like ui-router initialises FeedCtrl only once. Why?

Upvotes: 3

Views: 4974

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

To pass a parameter - we have to define it:

 .state('app.feed', {
    url: "/feed/{feedId}",
    views: {
      'menuContent': {
        templateUrl: "templates/feed.html",
        controller: "FeedCtrl"
      }
    }

In this case we define it as {feedId}

See more here

Some examples:

  • '/user/{id:[^/]*}' - Same as '/user/{id}' from the previous example.
  • '/user/{id:[0-9a-fA-F]{1,8}}' - Similar to the previous example, but only matches if the id parameter consists of 1 to 8 hex digits.
  • '/files/{path:.*}' - Matches any URL starting with '/files/' and captures the rest of the path into the parameter 'path'.
  • '/files/*path' - Ditto. Special syntax for catch all.

In case we do have parameter defined, and we will navigate among states with different feedId values... we will really see, that that controller FeedCtrl is reinstantiated. That's how the ui-router was designed

Upvotes: 6

Related Questions