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

javascript

ui-router

state-parameters

parameter-passing

byAlex Kataev·Jan 1, 2025

To pass parameters using ui-sref in AngularUI Router to the controller, you specify the state name followed by the parameters in an object:

<a ui-sref="stateName({paramKey: paramValue})">Link Text</a>

Retrieve these parameters in the controller using $stateParams:

$scope.paramValue = $stateParams.paramKey;

For instance, if you want to navigate to a user's profile with their ID, and then access it in the profile controller, do this:

<a ui-sref="userProfile({userID: 123})">Profile</a>

app.controller('ProfileController', function ($scope, $stateParams) {
    $scope.userID = $stateParams.userID; // here we go, userID unboxed!
});

Deep dive into 'Parameters 101'

Setting up addressable states with parameters

Kick off by defining a state with parameters in the $stateProvider configuration like this:

$stateProvider.state('details', {
    url: '/item/:itemId?query',
    params: {
        itemId: null,
        query: {squash: true, value: null}
    },
    templateUrl: 'details.html',
    controller: 'DetailsController'
});

The /:itemId piece is an URL parameter, while ?query is an optional search parameter. The params object allows you to preset default values and squash unused ones.

Ninja mode activated: Hidden and optional parameters

You can also include hidden parameters: invisible gems that don't appear in the URL but have a big role backstage:

params: {
    secret: { value: 'defaultSecret', dynamic: true } // Bingo! Hidden param
},

To dart about with optional parameters, include them only when needed:

<a ui-sref="details({query: 'searchText'})">Search Details</a>

Array and default values: the unsung heroes

Scale up by using arrays and setting default values, because who doesn't love extras?

params: {
    tags: { array: true, value: ['defaultTag'] } // All of the tags, please!
}

Getting on a first-name basis with parameters inside controllers

Inject $stateParams into your controller, and it's like meeting the params for coffee:

app.controller('DetailsController', function ($stateParams) {
    console.log($stateParams.itemId); // Debug-o-clock! Audit time for params
    this.query = $stateParams.query || 'defaultValue'; // Defaulting to safe, why not? 
    this.tags = $stateParams.tags;
});

Ordering programmatic state transitions around

Manage state transitions like a boss dealing with events. Put $state.go to work:

$scope.navigateToDetails = function (item) {
    $state.go('details', {itemId: item.id, query: 'info'}); // Pack your bags! We're navigating 
};

Remember, a page reload might amnesiac these parameters if not persisted properly.

Hacks, gotchas, and winning streaks

Crosschecking boundaries while defining parameters

Double, triple check that state name and parameter names match between ui-sref and the state configuration. One typo (autocomplete-got-my-back, I hope) can lead to parameters playing hide and seek.

Debugging, or CSI for params

Debugging should run in your veins. Embrace console.log within your controller to spy on your precious stateParams:

app.controller('MyController', function ($stateParams) {
    console.log($stateParams); // Logs are for lumberjacks, huh, think again!
});

Crafting tidy, semantic anchor tags

All for clarity - format your anchor tags well:

<a ui-sref="state({paramKey: 'value'})">Navigate</a>

Policies for problem-solving

Scrutinize your controller definition - are you injecting what's needed?
Is your state configuration defining parameters and default values accurately?
Confirm that you're using the right service, $stateParams, to access parameters.