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?

Shing

Show the ng-repeat and the model link in full. How do you create the state hierarchy that you later ng-repeating? Whatever the case may be, you can use ng-if or ng-switch to discern whether to display a link-flavor of <a> (with ui-sref) or a parent link-flavor. – Domineer

Possuble duplicate: #25600571 – Congregation

Correct answer in this code would be: <a ui-sref="{{link.Route ? link.Route: false}}" ng-click="clickLink(link)"> – Engage

Answer 1

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.

Impending

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 '.' " – Bookish

That's the exception(or you can also call it as rule), by design you can't navigate to abstract state – Impending

Can you please explain? How to "disable" the link without error? Currently dirty solution that I have is to call function with e.preventDefault() – Bookish

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 – Impending

Answer 2

Conditionally create the ui-sref attribute

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

Foreshadow

Getting below error, if you can help? Error: Could not resolve 'false' from state '' – Doall

Error: Invalid state ref '' – Garwood

I'll suggest reading solution here: #30221447 – Surrebuttal

to Ricky: which part of external links solution resolves "no link" issue? – Bookish