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?

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.

Answer 2

Conditionally create the ui-sref attribute

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