Как сделать вкладку активной, если разные маршруты?

Question

[KOPC1886]

Всем привет!)

Есть такая верстка

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

И есть такой роутер

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):/);
}]);

Как сделать, чтобы при маршруте when('/catalog/:categoryId/:serviceId' и when('/catalog/:categoryId' была активна вкладка catalog?

Answer 1

[Борис Беньковский]

a)Можно было бы создать сервис, например "tabStatus" и дерективу "enableTab", которая через DI зависит от этого сервиса. В первой строчке нужных Вам контроллеров (я так понимаю "Catalog" and "Service-Detail") вызвать tabStatus.activeCatalogTab(). Директиву повесить на нужный таб, и в link функции добовлять class active к Нужному табу.
b) Можно поступить более костыльно, просто в Ваших контроллерах вызывать jquery селектор и говнячить на прямую
с) Ваш роут провайдер уже считается устаревшим, вместо его юзайте ui-view. В нем усть вложенные view тогда, если сделать service-detail подвью от catalog то ваша проблема будет решаться более эллегантно чем a,b варианты ( оч не рекомендую a,b)

Comments

[KOPC1886]

а как то через ангуляр, но более быстрое решение можно сделать?)

[Борис Беньковский]

ну, это все через ангуляр, просто a и b и есть более быстрые, но более костыльные. Вы уж определитесь, либо быстро, либо качественно

[KOPC1886]

а что более качественно? вариант "c" ?

[Борис Беньковский]

KOPC1886: да

[KOPC1886]

benbor: а что будет лучше из первых двух вариантов?

[Борис Беньковский]

Я же уже ответил, Более костыльно <=> более быстрее.
сортировка от более быстрого к менее b, a, c. А что для Вас лучше - решите уж сам

[KOPC1886]

benbor: Спасибо Большое за ответ!)