Dynamically constructed ui-sref attribute in ui-router

I am new to angular and especially ui-router.

Here is a link:

<a ui-sref="/topic/{{topic.id}}">SomeText</a>

The link is dynamically populated.

So when I try to access that state from my config like this:

        templateUrl: "",
        controller: ""

I get this error message:

Error: Could not resolve ‘/topics/myTopic’ from state ‘topics’

In the above: myTopic is a variable name.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You are almost there. Just the parameter must be part of the URL definition, not the name of the state:

    url: '/{id:[0-9]{1,8}}', // we can also add some constraint, like int id only
    templateUrl: "",
    controller: ""

And how to call it (where currentItem.id would be injected dynamically as a part of some ng-repeat)

<a ui-sref="topics({id:currentItem.id})">SomeText</a>

Because ui-sref means: ui-sref='stateName({param: value, param: value}). More info here:

Solution 2

Try to use a simple name for state as 'topics' and use 'topics/:topicId' as url property.
After that you can use ui-sref='topics({topicId: topic.id})'

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply