How to make tab active if different routes?

Question

Angular

Hello everyone!)
There is such a layout

<div class="tabbable">
        <ul class="nav nav-tabs catalog" id="main-tab">
            <li class="catalog active">
                <a href="#/catalog/" class="catalog" data-target="#catalog" data-toggle="tab">
                    <span class="tab_catalog"></span>
                    Каталог сервисов
                </a>
            </li>
            <li class="favorites">
                <a href="#/favorites" class="a_favorites" data-target="#favorites" data-toggle="tab">
                    <span class="tab_favorites"></span>
                    Избранное
                </a>
            </li>
            <li class="applications"">
                <a href="#/applications" class="a_applications" style="height: 20px;
padding-right: 0;
padding: 13px 0px 0px 14px;" data-target="#applications" data-toggle="tab">
                    <span class="tab_applications"></span>
                    Статусы заявок
                    <span class="tab_task">
                        1
                    </span>
                </a>
            </li>
        </ul>
        <div class="tab-content service-catalog">
            <ng-view></ng-view>
        </div>
    </div>

And there is such a router

servicesCatalog.config(['$routeProvider', '$compileProvider', function ($routeProvider, $compileProvider) {
        $routeProvider.
            when('/catalog/:categoryId', {
                templateUrl: 'views/catalog.html',
                controller: 'Catalog'
            }).
            when('/favorites', {
                templateUrl: 'views/favorites.html',
                controller: 'Favorites'
            }).
            when('/applications', {
                templateUrl: 'views/applications.html',
                controller: 'Applications'
            }).
            when('/catalog/:categoryId/:serviceId', {
                templateUrl: 'views/service-detail.html',
                controller: 'Service-Detail'
            }).
            otherwise({
                redirectTo: '/catalog/:categoryId'
            });

        $compileProvider.urlSanitizationWhitelist(/^\s*(https?|mailto|file|tel|skype):/);
}]);

How to make when('/catalog/:categoryId/:serviceId' and when('/catalog/:categoryId') route have catalog tab active?

Answer 1

a) It would be possible to create a service, for example "tabStatus" and an "enableTab" directive, which through DI depends on this service. In the first line of the controllers you need (as I understand "Catalog" and "Service-Detail") call tabStatus.activeCatalogTab(). Place the directive on the required tab, and add class active to the required tab in the link function.
b) You can do something more hacky, just call the jquery selector in your controllers and go straight
c) Your route provider is already deprecated, use ui-view instead . There are nested views in it, then if you make a service-detail subview from the catalog, then your problem will be solved more elegantly than a, b options (I do not recommend a, b)