Установить активный стиль вкладки с 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. Если у вас есть вкладки, которые должны реагировать на второй уровень, третий или одиннадцатый путь, скорректируйте их соответствующим образом. Это разделение от 1 или больше будет обходить гнусное «#» в href, которое будет жить с индексом 0.

Единственное требование заключается в том, что вы вызываете для <a>, так как элемент предполагает наличие hrefатрибута, который он будет сравнивать с текущим путем. Тем не менее, вы можете довольно легко адаптироваться для чтения / записи родительского или дочернего элемента, если вы предпочитаете вызывать его <li>или что-то еще. Я копаю это, потому что вы можете использовать его во многих контекстах, просто меняя аргумент pathLevel. Если в логике предполагалась глубина чтения, вам понадобилось бы несколько версий директивы для использования с несколькими частями навигации.

РЕДАКТИРОВАНИЕ 18.03.14: Решение было недостаточно обобщено и активировалось бы, если бы вы определили arg для значения '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 в качестве вставного модуля, который вы можете просто объявить как зависимость. Я был бы счастлив, чтобы Bower-ize их, если кто-то на самом деле использует их.

Кроме того, если вам нужна совместимая с начальной загрузкой версия, включающая в себя <li>, вы можете использовать модуль вкладок angular-ui-bootstrap , который, как мне кажется, появился после этой первоначальной публикации и, возможно, даже более декларативный, чем этот. Он менее лаконичен для базовых вещей, но предоставляет вам некоторые дополнительные опции, такие как отключенные вкладки и декларативные события, которые запускаются при активации и деактивации.

@ 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);
                }
            });
        }

    };

}]);

Самое простое решение здесь:

Как установить загрузочный класс Navbar с Angular JS?

Который:

Используйте ng-controller для запуска одного контроллера за пределами ng-view:

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

Стоит прочтения.

Вот еще одна версия XML Lillies с изменением LI 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 лучшим и наиболее адаптируемым и ненавязчивым.

Однако у меня был небольшой глюк.

Для использования с начальной загрузкой вот как я изменил его:

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>