Site navigation using ui-sref, how to remove ui-sref attribute when not available

Question

I've setup navigation as follows, using ng-repeat, which works very well

<a ui-sref="{{link.Route}}" ng-click="clickLink(link)">
    <span class="title"> {{link.Text}} </span><span class="selected"></span>
</a>

However, my navigation items frequently have sublinks, which means the parent link isn't really a navigation link, it's just used to expand and view the sublinks. But sometime it is a link, and has no sublinks to display.

The problem is for those particular cases, when there is no state available, I need to remove the ui-sref all together, because there shouldn't be a link at all. Having it there is throwing 'Error: Invalid state ref '''

How do I remove the ui-sref when a state isn't available?

Show the `ng-repeat` and the model `link` in full. How do you create the state hierarchy that you later `ng-repeat`ing? Whatever the case may be, you can use `ng-if` or `ng-switch` to discern whether to display a link-flavor of `` (with `ui-sref`) or a parent link-flavor. — New Dev, Feb 17 '15 at 18:31
Possuble duplicate: http://stackoverflow.com/questions/25600071/how-to-achieve-that-ui-sref-be-conditionally-executed — Ben Diamant, Feb 17 '15 at 18:33

score 16 · Answer 1 · answered Feb 27 '15 at 21:46

16

You could use {{}} with expression

Markup

ui-sref="{{expression ? '.childState' : '.'}}"

. will create own state route, so while click on it, it will redirect no where.

Hope this could help you, Thanks.

answered Feb 27 '15 at 21:46

Pankaj Parkar

134,766
23
234
299

What do you mean "will create own state route, so while click on it, it will redirect no where.", I get error on click on the link - "Cannot transition to abstract state '.' " – Pumych Jul 20 '16 at 13:01
That's the exception(or you can also call it as rule), by design you can't navigate to abstract state – Pankaj Parkar Jul 20 '16 at 13:06
Can you please explain? How to "disable" the link without error? Currently dirty solution that I have is to call function with e.preventDefault() – Pumych Jul 20 '16 at 13:14
You can't disable anchor tag, so event.prevenDefault is one of the way to do it.. alternative way you can do is, iinstead of using ui-sref , you could use `ng-click` call a function and redirect from a function using `$state.go` – Pankaj Parkar Jul 20 '16 at 13:34

score 9 · Answer 2 · answered Feb 17 '15 at 18:49

9

Conditionally create the ui-sref attribute

<a ng-attr-ui-sref="{{ link.Route ? link.Route : false }}">
    ...
</a>

answered Feb 17 '15 at 18:49

Brett

107
1
5

3

Getting below error, if you can help? `Error: Could not resolve 'false' from state ''` – jaym Nov 19 '15 at 14:33
Error: Invalid state ref '' – Toolkit Dec 13 '15 at 04:05
I'll suggest reading solution here: http://stackoverflow.com/questions/30220947/how-would-i-have-ui-router-go-to-an-external-link-such-as-google-com – Ricky Levi Apr 02 '16 at 14:30
to Ricky: which part of external links solution resolves "no link" issue? – Pumych Jul 20 '16 at 13:04

Site navigation using ui-sref, how to remove ui-sref attribute when not available

2 Answers2

Linked