Встановити активний стиль вкладки за допомогою AngularJS

У мене в AngularJS такі маршрути:

$routeProvider
    .when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
    .when('/lab', {templateUrl:'partials/lab', controller:widgetsController})

На верхній панелі у мене є кілька посилань, оформлених як вкладки. Як я можу додати "активний" клас до вкладки залежно від поточного шаблону чи URL-адреси?

Спосіб вирішення цього питання, не покладаючись на URL-адреси, - це додавання спеціального атрибута до кожної часткової під час $routeProviderконфігурації, наприклад:

$routeProvider.
    when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: widgetsController,
        activetab: 'dashboard'
    }).
    when('/lab', {
        templateUrl: 'partials/lab.html',
        controller: widgetsController,
        activetab: 'lab'
    });

Визначте $routeу своєму контролері:

function widgetsController($scope, $route) {
    $scope.$route = $route;
}

Встановіть activeклас на основі поточної активної вкладки:

<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>

Одним із способів зробити це можна за допомогою директиви ngClass та служби $ location. У своєму шаблоні ви можете:

ng-class="{active:isActive('/dashboard')}"

де isActiveбула б функція в області, визначеній так:

myApp.controller('MyCtrl', function($scope, $location) {
    $scope.isActive = function(route) {
        return route === $location.path();
    }
});

Ось повний jsFiddle: http://jsfiddle.net/pkozlowski_opensource/KzAfG/

Повторення ng-class="{active:isActive('/dashboard')}"на кожній вкладці навігації може бути втомливим (якщо у вас багато вкладок), тому ця логіка може бути кандидатом на дуже просту директиву.

Дотримуючись поради Павла використовувати користувальницьку директиву, ось версія, яка не потребує додавання корисного навантаження на routeConfig, є супердекларативною і може бути адаптована для того, щоб реагувати на будь-який рівень шляху, просто змінивши, на який slice()із них ви звертаєте увагу. .

app.directive('detectActiveTab', function ($location) {
    return {
      link: function postLink(scope, element, attrs) {
        scope.$on("$routeChangeSuccess", function (event, current, previous) {
            /*  
                Designed for full re-usability at any path, any level, by using 
                data from attrs. Declare like this: 
                <li class="nav_tab">
                  <a href="#/home" detect-active-tab="1">HOME</a>
                </li> 
            */

            // This var grabs the tab-level off the attribute, or defaults to 1
            var pathLevel = attrs.detectActiveTab || 1,
            // This var finds what the path is at the level specified
                pathToCheck = $location.path().split('/')[pathLevel] || 
                  "current $location.path doesn't reach this level",
            // This var finds grabs the same level of the href attribute
                tabLink = attrs.href.split('/')[pathLevel] || 
                  "href doesn't include this level";
            // Above, we use the logical 'or' operator to provide a default value
            // in cases where 'undefined' would otherwise be returned.
            // This prevents cases where undefined===undefined, 
            // possibly causing multiple tabs to be 'active'.

            // now compare the two:
            if (pathToCheck === tabLink) {
              element.addClass("active");
            }
            else {
              element.removeClass("active");
            }
        });
      }
    };
  });

Ми досягаємо своїх цілей, слухаючи $routeChangeSuccessподію, а не ставлячи $watchна шлях. Я працюю, вважаючи, що це означає, що логіка повинна працювати рідше, так як я думаю, що дивиться вогонь на кожному $digestциклі.

Викликайте його, передавши аргумент рівня шляху на декларацію директиви. Це визначає, з яким фрагментом поточного $ location.path () ви хочете співставити свій hrefатрибут.

<li class="nav_tab"><a href="#/home" detect-active-tab="1">HOME</a></li>

Отже, якщо ваші вкладки повинні реагувати на базовий рівень шляху, зробіть аргумент "1". Таким чином, коли location.path () є "/ home", він буде відповідати "# / home" вhref . Якщо у вас є вкладки, які повинні реагувати на другий рівень, або третій, або 11-й шлях, відрегулюйте відповідно. Це нарізання від 1 або більше обійде негідний '#' в href, який буде жити з індексу 0.

Єдина вимога полягає в тому, що ви посилаєтесь на <a>, оскільки елемент припускає наявність hrefатрибута, який він буде порівнювати з поточним контуром. Однак ви можете досить легко адаптуватись до читання / запису батьківського або дочірнього елемента, якщо ви хочете посилатися на <li>щось або щось таке. Я копаю це, тому що ви можете повторно використовувати його у багатьох контекстах, просто змінивши аргумент pathLevel. Якщо глибина, яку слід читати, передбачалася логікою, вам знадобиться кілька версій директиви для використання з кількома частинами навігації.

EDIT 3/18/14: Рішення було неадекватно узагальнено, і воно активується, якщо ви визначите аргумент для значення "activeTab", яке повертається undefinedпроти обох $location.path()та елементів href. Тому що: undefined === undefined. Оновлено, щоб виправити цю умову.

Працюючи над цим, я зрозумів, що повинна бути версія, яку ви можете просто оголосити на батьківському елементі, із такою структурою шаблону:

<nav id="header_tabs" find-active-tab="1">
    <a href="#/home" class="nav_tab">HOME</a>
    <a href="#/finance" class="nav_tab">Finance</a>
    <a href="#/hr" class="nav_tab">Human Resources</a>
    <a href="#/quarterly" class="nav_tab">Quarterly</a>
</nav>

Зауважте, що ця версія вже не віддалено нагадує HTML у стилі Bootstrap. Але, він сучасніший і використовує менше елементів, тому я частково ставлюсь до цього. Ця версія директиви плюс оригінал тепер доступні на Github як модуль, що випадає, який ви можете просто оголосити як залежність. Я був би радий Бауер-Ізе їх, якщо хтось насправді ними користується.

Крім того, якщо ви хочете сумісну з завантажувальною версією версію, яка включає в себе <li>s, ви можете перейти з модулем Tagular-ui-bootstrap Tabs , який, на мою думку, вийшов після цієї оригінальної публікації, і який, можливо, навіть більш декларативний, ніж цей. Він менш стислий для базових матеріалів, але надає вам деякі додаткові параметри, наприклад, вимкнені вкладки та декларативні події, які активуються та вимикаються.

@ rob-juurlink Я трохи покращив ваше рішення:

замість кожного маршруту потрібна активна вкладка; і мені потрібно встановити активну вкладку в кожному контролері, я роблю це:

var App = angular.module('App',[]);
App.config(['$routeProvider', function($routeProvider){
  $routeProvider.
  when('/dashboard', {
    templateUrl: 'partials/dashboard.html',
    controller: Ctrl1
  }).
  when('/lab', {
    templateUrl: 'partials/lab.html',
    controller: Ctrl2
  });
}]).run(['$rootScope', '$location', function($rootScope, $location){
   var path = function() { return $location.path();};
   $rootScope.$watch(path, function(newVal, oldVal){
     $rootScope.activetab = newVal;
   });
}]);

І HTML виглядає приблизно так. Activetab - це лише URL-адреса, яка стосується цього маршруту. Це просто усуває необхідність додавання коду в кожен контролер (перетягування залежностей, таких як $ route і $ rootScope, якщо це єдина причина, яку вони використовують)

<ul>
    <li ng-class="{active: activetab=='/dashboard'}">
       <a href="#/dashboard">dashboard</a>
    </li>
    <li ng-class="{active: activetab=='/lab'}">
       <a href="#/lab">lab</a>
    </li>
</ul>

Можливо така директива, як ця, може вирішити вашу проблему: http://jsfiddle.net/p3ZMR/4/

HTML

<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>


</div>

JS

angular.module('link', []).
directive('activeLink', ['$location', function(location) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controller) {
            var clazz = attrs.activeLink;
            var path = attrs.href;
            path = path.substring(1); //hack because path does bot return including hashbang
            scope.location = location;
            scope.$watch('location.path()', function(newPath) {
                if (path === newPath) {
                    element.addClass(clazz);
                } else {
                    element.removeClass(clazz);
                }
            });
        }

    };

}]);

Тут найпростіше рішення:

Як встановити початковий активний клас bootstrap з Angular JS?

Який є:

Використовуйте ng-контролер, щоб запустити один контролер поза межами ng-перегляду:

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

і включати в controllers.js:

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}

Я рекомендую використовувати модуль state.ui, який не тільки підтримує декілька та вкладені перегляди, але й дуже полегшує такий вид роботи (код нижче цитується):

<ul class="nav">
    <li ng-class="{ active: $state.includes('contacts') }"><a href="#{{$state.href('contacts')}}">Contacts</a></li>
    <li ng-class="{ active: $state.includes('about') }"><a href="#{{$state.href('about')}}">About</a></li>
</ul>

Варто прочитати.

Ось ще одна версія зміни LI XMLillies w / domi, яка використовує рядок пошуку замість рівня шляху. Я думаю, що це трохи очевидніше, що відбувається для мого випадку використання.

statsApp.directive('activeTab', function ($location) {
  return {
    link: function postLink(scope, element, attrs) {
      scope.$on("$routeChangeSuccess", function (event, current, previous) {
        if (attrs.href!=undefined) { // this directive is called twice for some reason
          // The activeTab attribute should contain a path search string to match on.
          // I.e. <li><a href="#/nested/section1/partial" activeTab="/section1">First Partial</a></li>
          if ($location.path().indexOf(attrs.activeTab) >= 0) {
            element.parent().addClass("active");//parent to get the <li>
          } else {
            element.parent().removeClass("active");
          }
        }
      });
    }
  };
});

Тепер HTML виглядає так:

<ul class="nav nav-tabs">
  <li><a href="#/news" active-tab="/news">News</a></li>
  <li><a href="#/some/nested/photos/rawr" active-tab="/photos">Photos</a></li>
  <li><a href="#/contact" active-tab="/contact">Contact</a></li>
</ul>

Я вважав прихильник XMLilley найкращим і найбільш адаптованим та ненав'язливим.

Однак у мене був невеликий глюк.

Для використання з bootstrap nav, ось як я змінив його:

app.directive('activeTab', function ($location) {
    return {
      link: function postLink(scope, element, attrs) {
        scope.$on("$routeChangeSuccess", function (event, current, previous) {
            /*  designed for full re-usability at any path, any level, by using 
                data from attrs
                declare like this: <li class="nav_tab"><a href="#/home" 
                                   active-tab="1">HOME</a></li> 
            */
            if(attrs.href!=undefined){// this directive is called twice for some reason
                // this var grabs the tab-level off the attribute, or defaults to 1
                var pathLevel = attrs.activeTab || 1,
                // this var finds what the path is at the level specified
                    pathToCheck = $location.path().split('/')[pathLevel],
                // this var finds grabs the same level of the href attribute
                    tabLink = attrs.href.split('/')[pathLevel];
                // now compare the two:
                if (pathToCheck === tabLink) {
                  element.parent().addClass("active");//parent to get the <li>
                }
                else {
                  element.parent().removeClass("active");
                }
            }
        });
      }
    };
  });

Я додав "if (attrs.href! = Undefined)", оскільки цю функцію влучно викликають двічі, вдруге викликаючи помилку.

Щодо html:

<ul class="nav nav-tabs">
   <li class="active" active-tab="1"><a href="#/accueil" active-tab="1">Accueil</a></li>
   <li><a active-tab="1" href="#/news">News</a></li>
   <li><a active-tab="1" href="#/photos" >Photos</a></li>
   <li><a active-tab="1" href="#/contact">Contact</a></li>
</ul>

Приклад завантаження.

Якщо ви використовуєте Angulars, вбудований у маршрутизацію (ngview), ця директива може бути використана:

angular.module('myApp').directive('classOnActiveLink', [function() {
    return {
        link: function(scope, element, attrs) {

            var anchorLink = element.children()[0].getAttribute('ng-href') || element.children()[0].getAttribute('href');
            anchorLink = anchorLink.replace(/^#/, '');

            scope.$on("$routeChangeSuccess", function (event, current) {
                if (current.$$route.originalPath == anchorLink) {
                    element.addClass(attrs.classOnActiveLink);
                }
                else {
                    element.removeClass(attrs.classOnActiveLink);
                }
            });

        }
    };
}]);

Припустимо, що ваша розмітка виглядає так:

    <ul class="nav navbar-nav">
        <li class-on-active-link="active"><a href="/orders">Orders</a></li>
        <li class-on-active-link="active"><a href="/distributors">Distributors</a></li>
    </ul>

Мені подобається, що це робилося, оскільки ви можете встановити ім'я класу, яке потрібно в своєму атрибуті.

Ви також можете просто ввести місцеположення в область застосування та використовувати його для вирахування стилю навігації:

function IndexController( $scope, $rootScope, $location ) {
  $rootScope.location = $location;
  ...
}

Потім використовуйте його у вашому ng-class:

<li ng-class="{active: location.path() == '/search'}">
  <a href="/search">Search><a/>
</li>

Альтернативний спосіб - використовувати ui-sref-active

Директива, яка працює поряд з ui-sref для додавання класів до елемента, коли стан відповідної директиви ui-sref є активним, і видалення їх, коли воно неактивне. Основний випадок використання - спростити особливий зовнішній вигляд меню навігації, що спирається на ui-sref, шляхом того, щоб кнопка меню "активного" стану виглядала іншою, відрізняючи її від неактивних пунктів меню.

Використання:

ui-sref-active = 'class1 class2 class3' - класи "class1", "class2" і "class3" додаються до директивного елемента, коли пов'язаний стан ui-sref активний, і видаляються, коли він неактивний.

Приклад:
огляду на наступний шаблон,

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

коли стан додатка "app.user" і містить параметр стану "user" зі значенням "bilbobaggins", отриманий HTML відображатиметься як

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

Ім'я класу інтерполюється один раз протягом часу посилання директив (будь-які подальші зміни інтерпольованого значення ігноруються). Кілька класів можуть бути задані у форматі, розділеному пробілом.

Використовуйте директиву ui-sref-opts, щоб передати параметри до $ state.go (). Приклад:

<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

Я погоджуюся з публікацією Роб про наявність у контролері спеціального атрибута. Мабуть, у мене недостатньо респондентів для коментарів. Ось jsfiddle, яку вимагали:

зразок html

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="link in links" ng-class="{active: $route.current.activeNav == link.type}"> <a href="{{link.uri}}">{{link.name}}</a>

        </li>
    </ul>
</div>

зразок app.js

angular.module('MyApp', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/a', {
        activeNav: 'a'
    })
        .when('/a/:id', {
        activeNav: 'a'
    })
        .when('/b', {
        activeNav: 'b'
    })
        .when('/c', {
        activeNav: 'c'
    });
}])
    .controller('MyCtrl', function ($scope, $route) {
    $scope.$route = $route;
    $scope.links = [{
        uri: '#/a',
        name: 'A',
        type: 'a'
    }, {
        uri: '#/b',
        name: 'B',
        type: 'b'
    }, {
        uri: '#/c',
        name: 'C',
        type: 'c'
    }, {
        uri: '#/a/detail',
        name: 'A Detail',
        type: 'a'
    }];
});

http://jsfiddle.net/HrdR6/

'use strict';

angular.module('cloudApp')
  .controller('MenuController', function ($scope, $location, CloudAuth) {
    $scope.menu = [
      {
        'title': 'Dashboard',
        'iconClass': 'fa fa-dashboard',
        'link': '/dashboard',
        'active': true
      },
      {
        'title': 'Devices',
        'iconClass': 'fa fa-star',
        'link': '/devices'
      },
      {
        'title': 'Settings',
        'iconClass': 'fa fa-gears',
        'link': '/settings'
      }
    ];
    $location.path('/dashboard');
    $scope.isLoggedIn = CloudAuth.isLoggedIn;
    $scope.isAdmin = CloudAuth.isAdmin;
    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

І використовуйте наведене нижче в шаблоні:

<li role="presentation" ng-class="{active:isActive(menuItem.link)}" ng-repeat="menuItem in menu"><a href="{{menuItem.link}}"><i class="{{menuItem.iconClass}}"></i>&nbsp;&nbsp;{{menuItem.title}}</a></li>

Мені потрібно було рішення, яке не потребує змін у контролерах, оскільки для деяких сторінок ми рендеруем лише шаблони, а контролер взагалі немає. Завдяки попереднім коментаторам, які запропонували використовувати, $routeChangeSuccessя придумав щось подібне:

# Directive
angular.module('myapp.directives')
.directive 'ActiveTab', ($route) ->
  restrict: 'A'

  link: (scope, element, attrs) ->
    klass = "active"

    if $route.current.activeTab? and attrs.flActiveLink is $route.current.activeTab
      element.addClass(klass)

    scope.$on '$routeChangeSuccess', (event, current) ->
      if current.activeTab? and attrs.flActiveLink is current.activeTab
        element.addClass(klass)
      else
        element.removeClass(klass)

# Routing
$routeProvider
.when "/page",
  templateUrl: "page.html"
  activeTab: "page"
.when "/other_page",
  templateUrl: "other_page.html"
  controller: "OtherPageCtrl"
  activeTab: "other_page"

# View (.jade)
a(ng-href='/page', active-tab='page') Page
a(ng-href='/other_page', active-tab='other_page') Other page

Це не залежить від URL-адрес, і тому його дуже легко встановити для будь-яких підсторінок тощо.

Я не можу згадати, де я знайшов цей метод, але він досить простий і добре працює.

HTML:

<nav role="navigation">
    <ul>
        <li ui-sref-active="selected" class="inactive"><a ui-sref="tab-01">Tab 01</a></li> 
        <li ui-sref-active="selected" class="inactive"><a ui-sref="tab-02">Tab 02</a></li>
    </ul>
</nav>

CSS:

  .selected {
    background-color: $white;
    color: $light-blue;
    text-decoration: none;
    border-color: $light-grey;
  } 

Якщо ви використовуєте ngRoute (для маршрутизації), то ваша програма матиме конфігурацію нижче,

angular
  .module('appApp', [
    'ngRoute'
 ])
config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
}
});

Тепер просто додайте контролер у цю конфігурацію так само, як нижче,

angular
      .module('appApp', [
        'ngRoute'
     ])
    config(function ($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            activetab: 'main'
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl',
            activetab: 'about'
          })
    }
    })
  .controller('navController', function ($scope, $route) {
    $scope.$route = $route;
  });

Як ви вже згадували активну вкладку у своїй конфігурації, тепер вам просто потрібно додати активний клас у свій <li>або <a>тег. Подібно до,

ng-class="{active: $route.current.activetab == 'about'}"

Що означає, щоразу, коли користувач натискає на сторінку, це автоматично визначає поточну вкладку та застосовує активний клас css.

Я сподіваюся, що це допомагає!

Прийшов сюди для вирішення .. хоча вище рішення працюють нормально, але вони вважають їх небагато складними непотрібними. Для людей, які все ще шукають легке та акуратне рішення, воно виконає завдання ідеально.

<section ng-init="tab=1">
                <ul class="nav nav-tabs">
                    <li ng-class="{active: tab == 1}"><a ng-click="tab=1" href="#showitem">View Inventory</a></li>
                    <li ng-class="{active: tab == 2}"><a ng-click="tab=2" href="#additem">Add new item</a></li>
                    <li ng-class="{active: tab == 3}"><a ng-click="tab=3" href="#solditem">Sold item</a></li>
                </ul>
            </section>