使用Angular UI路由器我想突出显示抽象父状态并链接到子具体状态

Question

我的主导航应该在任何子状态处于活动状态时突出显示项目，即

<li ui-sref-active="selected">
    <a ui-sref="settings">Settings</a>
</li>

假设这些状态

$stateProvider
    .state({
        abstract: true,
        name: 'settigns',
        url: '/settings',
        template: '<ui-view/>'
    })
    .state({
        name: 'settings.user',
        url: '',
        templateUrl: require('./user.html'),
        reloadOnSearch: false
    })
    .state({
        name: 'settings.company',
        url: '/company',
        templateUrl: require('./company.html'),
        reloadOnSearch: false
    });

只要我在任何设置页面中，上层HTML就会正确地突出显示我的li，但链接本身会指向一个抽象状态，因此它无法正常工作。

我应该如何设置链接状态？

Answer 1

任何人在这里遇到了这个问题，这个解决方案无需任何额外的代码即可运行：

<li ui-sref-active="{ selected: 'settings' }">
    <a ui-sref="settings.user">Settings</a>
</li>