Home  >  Article  >  Web Front-end  >  How Do You Pass Parameters to States in UI-Router with ui-sref?

How Do You Pass Parameters to States in UI-Router with ui-sref?

Susan Sarandon
Susan SarandonOriginal
2024-11-09 00:22:011017browse

How Do You Pass Parameters to States in UI-Router with ui-sref?

Understanding Parameter Passing in UI-Router with ui-sref

In UI-Router, passing parameters to a state when transitioning via ui-sref requires specific configuration. Let's delve into the steps:

1. Define URL Parameters:

Define the expected URL parameters in the state's url property. The syntax is :paramName? where paramName is the parameter you want to receive. For example:

2. Assign Parameter Values to ui-sref:

Pass parameter values to ui-sref as an object within braces. The syntax is ui-sref="stateName({paramName: 'value', ...})". Example:

3. Utilize $stateParams in the Controller:

In the controller for the destination state, inject $stateParams, which contains the passed parameters. Retrieve the values using $stateParams.paramName. Example:

4. Passing Non-URL Parameters:

In addition to parameters in the URL, you can define additional parameters in the state's params configuration. This allows you to pass parameters that are not part of the URL. Example:

Parameters defined in params can be passed using $state.go() or ui-sref. They will not be included in the URL.

5. Array Parameters:

You can also declare parameters as arrays by setting array: true in the params configuration. Example:

Remember to use square braces when passing array values:

The above is the detailed content of How Do You Pass Parameters to States in UI-Router with ui-sref?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn