AngularJS - Multiple 'ui-sref' in single 'ui-sref-active'

Question

HTML:

<!-- Order -->
<li ui-sref-active="active">
    <a ui-sref="order" class="main_link">
        <i class="fa fa-shopping-cart"></i>Order
    </a>
    <a ui-sref="order/create"><span class="plus">+</span></a>
    <div class="clearfix"></div>
</li>

I want to add class="active" on <li>.

Whenever click on <a ui-sref="order/create"><span class="plus">+</span></a> this, that time class="active" add on <li>.

BUT

click on <a ui-sref="order" class="main_link"><i class="fa fa-shopping-cart"></i>Order</a> that time class="active" not add on <li>.

Your help would be appreciated.

Answer 1

The way the ui-router is currently implemented it is not possible to do that. You can't specify for which particular ui-sref the ui-sref-active will be activated. That being said, it should be easier to adjust your template to wrap those links in such a way that you can have one ui-sref-active per one ui-sref. At least easier than adjusting ui-router behaviour.