Jika saya memiliki navbar di bootstrap dengan item

Home | About | Contact

Bagaimana cara mengatur kelas aktif untuk setiap item menu ketika mereka aktif? Yaitu, bagaimana saya bisa mengatur class="active"ketika rute sudut berada di

1. #/ untuk rumah
2. #/about untuk halaman tentang
3. #/contact untuk halaman kontak

Cara yang sangat elegan adalah dengan menggunakan ng-controller untuk menjalankan satu kontroler di luar tampilan-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>

dan sertakan di controllers.js:

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

Saya baru saja menulis arahan untuk menangani hal ini, jadi Anda bisa menambahkan atribut bs-active-linkke <ul>elemen induk , dan setiap kali rute diubah, ia akan menemukan tautan yang cocok, dan menambahkan activekelas ke yang sesuai <li>.

Anda dapat melihatnya beraksi di sini: http://jsfiddle.net/8mcedv3b/

Contoh HTML:

<ul class="nav navbar-nav" bs-active-link>
  <li><a href="/home">Home</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Javascript:

angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
    restrict: 'A', //use as attribute 
    replace: false,
    link: function (scope, elem) {
        //after the route has changed
        scope.$on("$routeChangeSuccess", function () {
            var hrefs = ['/#' + $location.path(),
                         '#' + $location.path(), //html5: false
                         $location.path()]; //html5: true
            angular.forEach(elem.find('a'), function (a) {
                a = angular.element(a);
                if (-1 !== hrefs.indexOf(a.attr('href'))) {
                    a.parent().addClass('active');
                } else {
                    a.parent().removeClass('active');   
                };
            });     
        });
    }
}
}]);

Anda dapat melihat di AngularStrap , arahan navbar tampaknya adalah yang Anda cari:

https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js

.directive('bsNavbar', function($location) {
  'use strict';

  return {
    restrict: 'A',
    link: function postLink(scope, element, attrs, controller) {
      // Watch for the $location
      scope.$watch(function() {
        return $location.path();
      }, function(newValue, oldValue) {

        $('li[data-match-route]', element).each(function(k, li) {
          var $li = angular.element(li),
            // data('match-rout') does not work with dynamic attributes
            pattern = $li.attr('data-match-route'),
            regexp = new RegExp('^' + pattern + '$', ['i']);

          if(regexp.test(newValue)) {
            $li.addClass('active');
          } else {
            $li.removeClass('active');
          }

        });
      });
    }
  };
});

Untuk menggunakan arahan ini:

1. Unduh AngularStrap dari http://mgcrea.github.io/angular-strap/

2. Sertakan skrip di halaman Anda setelah bootstrap.js:
   <script src="lib/angular-strap.js"></script>

3. Tambahkan arahan ke modul Anda:
   angular.module('myApp', ['$strap.directives'])

4. Tambahkan arahan ke navbar Anda:
   <div class="navbar" bs-navbar>

5. Tambahkan regex pada setiap item nav:
   <li data-match-route="/about"><a href="#/about">About</a></li>

Inilah pendekatan sederhana yang bekerja dengan baik dengan Angular.

<ul class="nav navbar-nav">
    <li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
    <li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
    <li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>

Di dalam pengontrol AngularJS Anda:

$scope.isActive = function (viewLocation) {
     var active = (viewLocation === $location.path());
     return active;
};

Jika Anda bekerja dengan router Angular, direktif RouterLinkActive dapat digunakan dengan sangat elegan:

<ul class="navbar-nav">
  <li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="gallery" routerLinkActive="active">Gallery</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="pricing" routerLinkActive="active">Prices</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="contact" routerLinkActive="active">Contact</a></li>
</ul>

Pertama dan terpenting, masalah ini dapat dipecahkan dengan banyak cara. Cara ini mungkin bukan yang paling elegan, tapi itu bekerja dengan baik.

Berikut adalah solusi sederhana yang harus Anda tambahkan ke proyek apa pun. Anda bisa menambahkan "pageKey" atau properti lain saat mengkonfigurasi rute yang bisa Anda gunakan untuk mematikan. Selain itu, Anda dapat mengimplementasikan pendengar pada metode $ routeChangeSuccess dari objek $ route untuk mendengarkan keberhasilan penyelesaian perubahan rute.

Ketika pawang Anda menembak Anda mendapatkan kunci halaman, dan menggunakan kunci itu untuk menemukan elemen yang harus "AKTIF" untuk halaman ini, dan Anda menerapkan kelas AKTIF.

Perlu diingat Anda membutuhkan cara untuk membuat SEMUA elemen "DI AKTIF". Seperti yang Anda lihat, saya menggunakan kelas .pageKey pada item nav saya untuk mematikan semuanya, dan saya menggunakan .pageKey_ {PAGEKEY} untuk menyalakannya secara individual. Mengalihkan semuanya ke tidak aktif, akan dianggap sebagai pendekatan naif, berpotensi Anda akan mendapatkan kinerja yang lebih baik dengan menggunakan rute sebelumnya untuk membuat hanya item aktif yang tidak aktif, atau Anda dapat mengubah pemilih jquery untuk hanya memilih item aktif yang dibuat tidak aktif. Menggunakan jquery untuk memilih semua item yang aktif mungkin merupakan solusi terbaik karena ini memastikan semuanya dibersihkan untuk rute saat ini jika ada bug css yang mungkin ada pada rute sebelumnya.

Yang berarti mengubah baris kode ini:

$(".pagekey").toggleClass("active", false);

untuk yang ini

$(".active").toggleClass("active", false);

Berikut ini beberapa contoh kode:

Diberikan navbar bootstrap dari

<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
            <li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
            <li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
            <li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
            <li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
        </ul>
    </div>
</div>

Dan modul sudut dan pengontrol seperti berikut:

<script type="text/javascript">

    function Ctrl($scope, $http, $routeParams, $location, $route) {

    }



    angular.module('BookingFormBuilder', []).
        config(function ($routeProvider, $locationProvider) {
            $routeProvider.
                when('/', { 
                   template: 'I\'m on the home page', 
                   controller: Ctrl, 
                   pageKey: 'HOME' }).
                when('/page1/create', { 
                   template: 'I\'m on page 1 create', 
                   controller: Ctrl, 
                   pageKey: 'CREATE' }).
                when('/page1/edit/:id', { 
                   template: 'I\'m on page 1 edit {id}', 
                   controller: Ctrl, pageKey: 'EDIT' }).
                when('/page1/published/:id', { 
                   template: 'I\'m on page 1 publish {id}', 
                   controller: Ctrl, pageKey: 'PUBLISH' }).
                otherwise({ redirectTo: '/' });

            $locationProvider.hashPrefix("!");
        }).run(function ($rootScope, $http, $route) {

            $rootScope.$on("$routeChangeSuccess", 
                           function (angularEvent, 
                                     currentRoute,
                                     previousRoute) {

                var pageKey = currentRoute.pageKey;
                $(".pagekey").toggleClass("active", false);
                $(".pagekey_" + pageKey).toggleClass("active", true);
            });

        });

</script>

Anda benar-benar dapat menggunakan petunjuk angular-ui-utils ' ui-route:

<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">Contact</a>

atau:

Kontroler Header

/**
 * Header controller
 */
angular.module('myApp')
  .controller('HeaderCtrl', function ($scope) {
    $scope.menuItems = [
      {
        name: 'Home',
        url:  '/',
        title: 'Go to homepage.'
      },
      {
        name:   'About',
        url:    '/about',
        title:  'Learn about the project.'
      },
      {
        name:   'Contact',
        url:    '/contact',
        title:  'Contact us.'
      }
    ];
  });

Halaman indeks

<!-- index.html: -->
<div class="header" ng-controller="HeaderCtrl">
  <ul class="nav navbar-nav navbar-right">
    <li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}"
      ng-repeat="menuItem in menuItems">
      <a ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
        {{menuItem.name}}
      </a>
    </li>
  </ul>
</div>

Jika Anda menggunakan ui-utils, Anda mungkin juga tertarik dengan ui-router untuk mengelola tampilan parsial / bersarang.

Saya menemukan semua jawaban ini agak terlalu rumit bagi saya, maaf. Jadi saya telah membuat arahan kecil yang harus bekerja berdasarkan per navbar:

app.directive('activeLink', function () {
    return {
        link: function (scope, element, attrs) {
            element.find('.nav a').on('click', function () {
                angular.element(this)
                    .parent().siblings('.active')
                    .removeClass('active');
                angular.element(this)
                    .parent()
                    .addClass('active');
            });
        }
    };
});

Pemakaian:

<ul class="nav navbar-nav navbar-right" active-link>
    <li class="nav active"><a href="home">Home</a></li>
    <li class="nav"><a href="foo">Foo</a></li>
    <li class="nav"><a href="bar">Bar</a></li>
</ul>

Saya menggunakan arahan kelas-ng dengan $ location untuk mencapainya.

<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
    <a href="#/">Carpeta Amarilla</a>
</li>
<li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Auditoria
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu pull-right">
        <li data-ng-class="{active: ($location.path() == '/auditoria') }">
            <a href="#/auditoria">Por Legajo</a>
        </li>
        <li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
            <a href="#/auditoria/todos">General</a>
        </li>
    </ul>
</li>
</ul>

Ini membutuhkan navbar untuk berada di dalam Kontroler utama dengan akses ke layanan $ location seperti ini:

bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location', 
   function MenuCntl($scope, $route, $routeParams, $location) {
   $scope.$route = $route;
   $scope.$location = $location;
   $scope.$routeParams = $routeParams;
}]);

Anda dapat mencapai ini dengan bersyarat dalam ekspresi sudut, seperti:

<a href="#" class="{{ condition ? 'active' : '' }}">link</a>

Yang sedang berkata, saya menemukan arahan sudut menjadi cara yang lebih "tepat" untuk melakukannya, meskipun outsourcing banyak mini-logika ini agak dapat mencemari basis kode Anda.

Saya menggunakan persyaratan untuk penataan GUI sesekali selama pengembangan, karena ini sedikit lebih cepat daripada membuat arahan. Saya tidak bisa memberi tahu Anda sebuah contoh di mana mereka benar-benar tetap di basis kode lama. Pada akhirnya saya mengubahnya menjadi arahan atau menemukan cara yang lebih baik untuk menyelesaikan masalah.

Jika Anda menggunakan ui-router , contoh berikut harus memenuhi kebutuhan Anda berdasarkan komentar @ DanPantry pada jawaban yang diterima tanpa menambahkan kode sisi pengontrol:

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ui-sref-active="active"><a ui-sref="app.home()" href="/">Home</a></li>
        <li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs">Dogs</a></li>
        <li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

Anda dapat memeriksa dokumen untuk info lebih lanjut.

Jika Anda lebih suka tidak menggunakan AngularStrap maka arahan ini harus melakukan trik !. Ini adalah modifikasi dari https://stackoverflow.com/a/16231859/910764 .

JavaScript

angular.module('myApp').directive('bsNavbar', ['$location', function ($location) {
  return {
    restrict: 'A',
    link: function postLink(scope, element) {
      scope.$watch(function () {
        return $location.path();
      }, function (path) {
        angular.forEach(element.children(), (function (li) {
          var $li = angular.element(li),
            regex = new RegExp('^' + $li.attr('data-match-route') + '$', 'i'),
            isActive = regex.test(path);
          $li.toggleClass('active', isActive);
        }));
      });
    }
  };
}]);

HTML

<ul class="nav navbar-nav" bs-navbar>
  <li data-match-route="/home"><a href="#/home">Home</a></li>
  <li data-match-route="/about"><a href="#/about">About</a></li>
</ul>

Catatan: Kelas-kelas HTML di atas menganggap Anda menggunakan Bootstrap 3.x

Inilah pendapat saya. Sedikit kombinasi jawaban ditemukan di pos ini. Saya memiliki kasus yang sedikit berbeda, jadi solusi saya melibatkan memisahkan menu ke dalam template sendiri untuk digunakan dalam Directive Definition Ojbect kemudian menambahkan navbar saya ke halaman yang saya butuhkan. Pada dasarnya, saya memiliki halaman login yang tidak ingin saya sertakan pada menu saya, jadi saya menggunakan ngInclude dan masukkan arahan ini ketika login:

PENGARAHAN:

module.directive('compModal', function(){


return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: true,
    templateUrl: 'templates/menu.html',
    controller: function($scope, $element, $location){
        $scope.isActive = function(viewLocation){

            var active = false;

            if(viewLocation === $location.path()){
                active = true;
            }

            return active;

        }
    }
 }
});

TEMPLATE LANGSUNG (templat / menu.html)

<ul class="nav navbar-nav">
  <li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
  <li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
  <li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>

HTML YANG TERMASUK ARAH

<comp-navbar/>

Semoga ini membantu

Memperluas jawaban saya, saya membutuhkan ini untuk menangani struktur seperti ini.

-indeks

-events <-active
--- event-list
--- event-edit
--- event-map <-clicked

-tempat
--- tempat-daftar
--- tempat-edit
--- tempat-peta

jadi alih-alih mencocokkan, saya harus menggunakan indexOf, untuk memvalidasi tautan anak yang diformat agar sesuai dengan kondisi. Jadi untuk 'acara':

<li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown">


function NavController($scope, $location) { 
$scope.isActive = function (viewLocation) {
    var s=false;
    if($location.path().indexOf(viewLocation) != -1){
     s = true;
    }
    return s;
};}

Ini adalah solusi sederhana

<ul class="nav navbar-nav navbar-right navbar-default menu">
  <li ng-class="menuIndice == 1 ? 'active':''">
    <a ng-click="menuIndice = 1" href="#/item1">item1</a>
  </li>
  <li ng-class="menuIndice == 2 ? 'active':''">
    <a ng-click="menuIndice = 2" href="#/item2">item2</a>
  </li>
  <li ng-class="menuIndice == 3 ? 'active':''">
    <a ng-click="menuIndice = 3" href="#/item3">item3</a>
  </li>
</ul>

Sehubungan dengan jawaban @ Olivier's AngularStrap, saya juga menerapkan jawaban kevinknelson dari: https://github.com/twbs/bootstrap/issues/9013 .

Secara native, navbar Bootstrap3 tidak dirancang untuk aplikasi satu halaman (misalnya Angular) dan dengan demikian menu ketika pada layar kecil tidak runtuh saat klik.

JavaScript

/**
 * Main AngularJS Web Application
 */

var app = angular.module('yourWebApp', [
    'ngRoute'
]);


/**
 * Setup Main Menu
 */

app.controller('MainNavCtrl', [ '$scope', '$location', function ( $scope, $location) {
    $scope.menuItems = [
        {
            name: 'Home',
            url:  '/home',
            title: 'Welcome to our Website'
        },
        {
            name: 'ABOUT',
            url:  '/about',
            title: 'Know about our work culture'
        },
        {
            name:   'CONTACT',
            url:    '/contact',
            title:  'Get in touch with us'
        }
    ];

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

HTML

  <div class="navbar-collapse collapse" ng-controller="MainNavCtrl">
    <ul id="add-magic-line" class="nav navbar-nav navbar-right">
      <li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems">
        <a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
          {{menuItem.name}}
        </a>
      </li>
    </ul>
  </div>

Terima kasih kepada @Pylinux . Saya telah menggunakan tekniknya dan juga memodifikasinya untuk mendukung menu drop down "satu" (sub ul / li), karena itulah yang saya butuhkan. Lihat beraksi di tautan biola di bawah ini.

Diperbarui Fiddle berdasarkan jawaban pylinux - http://jsfiddle.net/abhatia/en4qxw6g/

Saya membuat tiga perubahan berikut, untuk mendukung menu drop-down satu tingkat:
1. Menambahkan nilai kelas dd (dropdown) untuk elemen "a" di bawah li yang perlu memiliki daftar sub ul.

         <li><a class="dd">This link points to #/fun5</a>
          <ul>
            <li><a href="#/fun6?some=data">This link points to #/fun6</a>
            </li>
            <li><a href="#/fun7?some=data">This link points to #/fun7</a>
            </li>
            <li><a href="#/fun8?some=data">This link points to #/fun8</a>
            </li>
            <li><a href="#/fun9?some=data">This link points to #/fun9</a>
            </li>
          </ul>
        </li>

2. Javascript Diperbarui untuk menambahkan logika baru berikut.

 if(angular.element(li).parent().parent().children('a').hasClass("dd"))
 {angular.element(li).parent().parent().children('a.dd').addClass('active');}

3. Diperbarui CSS untuk menambahkan yang berikut:

a.active {background-color:red;}

Semoga ini akan membantu seseorang yang ingin menerapkan menu dropdown tingkat tunggal.

Gunakan objek sebagai variabel sakelar.
Anda dapat melakukan inline ini cukup sederhana dengan:

<ul class="nav navbar-nav">
   <li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/">Link One</a></li>
   <li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">Link Two</a></li>
</ul>

Setiap kali Anda mengklik tautan, objek sakelar digantikan oleh objek baru di mana hanya properti sakelar objek yang benar yang benar. Properti yang tidak terdefinisi akan dievaluasi sebagai false sehingga elemen yang bergantung padanya tidak akan memiliki kelas aktif yang ditugaskan.

Anda juga dapat menggunakan arahan tautan aktif ini https://stackoverflow.com/a/23138152/1387163

Orang tua li akan mendapatkan kelas aktif ketika lokasi cocok / url :

<li>
    <a href="#!/url" active-link active-link-parent>
</li>

Saya sarankan menggunakan arahan pada tautan. Ini biola.

Tapi ini belum sempurna. Hati-hati dengan hashbangs;)

Berikut adalah javascript untuk direktif:

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 not return including hashbang
        scope.location = location;
        scope.$watch('location.path()', function(newPath) {
          if (path === newPath) {
            element.addClass(clazz);
          } else {
            element.removeClass(clazz);
          }
        });
      }
    };
  }]);

dan inilah bagaimana ini akan digunakan dalam 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>

setelah itu styling dengan css:

.active{ color:red; }

Hanya untuk menambahkan dua sen saya dalam debat saya telah membuat modul sudut murni (tanpa jquery), dan itu juga akan bekerja dengan hash url yang berisi data. ( ig #/this/is/path?this=is&some=data )

Anda cukup menambahkan modul sebagai dependensi dan auto-activeke salah satu leluhur menu. Seperti ini:

<ul auto-active>
    <li><a href="#/">main</a></li>
    <li><a href="#/first">first</a></li>
    <li><a href="#/second">second</a></li>
    <li><a href="#/third">third</a></li>
</ul>

Dan modulnya terlihat seperti ini:

(function () {
    angular.module('autoActive', [])
        .directive('autoActive', ['$location', function ($location) {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, element) {
                function setActive() {
                    var path = $location.path();
                    if (path) {
                        angular.forEach(element.find('li'), function (li) {
                            var anchor = li.querySelector('a');
                            if (anchor.href.match('#' + path + '(?=\\?|$)')) {
                                angular.element(li).addClass('active');
                            } else {
                                angular.element(li).removeClass('active');
                            }
                        });
                    }
                }

                setActive();

                scope.$on('$locationChangeSuccess', setActive);
            }
        }
    }]);
}());

* (Tentu saja Anda bisa menggunakan bagian arahan)

** Perlu juga diperhatikan bahwa ini tidak bekerja untuk hash kosong ( ig example.com/# atau hanya example.com) yang dibutuhkan setidaknya example.com/#/atau adil example.com#/. Tapi ini terjadi secara otomatis dengan ngResource dan sejenisnya.

• Ini biola: http://jsfiddle.net/gy2an/8/
• Inilah github: https://github.com/Karl-Gustav/autoActive
• Inilah jawaban asli saya: https://stackoverflow.com/a/22282124/1465640

Ini melakukan trik untuk saya:

  var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
  var domain_index =  window.location.href.indexOf(domain);
  var long_app_name = window.location.href.slice(domain_index+domain.length+1); 
  // this turns http://www.example.com/whatever/whatever to whatever/whatever
  app_name = long_app_name.slice(0, long_app_name.indexOf('/')); 
  //now you are left off with just the first whatever which is usually your app name

maka Anda menggunakan jquery (berfungsi dengan sudut juga) untuk menambahkan kelas aktif

$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');

dan tentu saja css:

.active{background:red;}

ini berfungsi jika Anda memiliki html seperti ini:

<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>

ini akan menambah kelas aktif menggunakan url halaman dan warna latar belakang Anda menjadi merah jika Anda di www.somesite.com/ee thaen ee adalah 'aplikasi' dan itu akan aktif

Ini sudah lama dijawab tetapi saya pikir saya akan berbagi dengan saya:

.run(function($rootScope, $state){
 $rootScope.$state = $state;
});

Templat:

<ul class="nav navbar-nav">
    <li ng-class="{ active: $state.contains('View1') }"><a href="...">View 1</a></li>
    <li ng-class="{ active: $state.contains('View2') }"><a href="...">View 2</a></li>
    <li ng-class="{ active: $state.contains('View3') }"><a href="...">View 3</a></li>
</ul>

Bagi yang menggunakan ui-router:

<ul class="nav navbar-nav">
        <li ui-sref-active="active"><a href="...">View 1</a></li>
        <li ui-sref-active="active"><a href="...">View 2</a></li>
        <li ui-sref-active="active"><a href="...">View 3</a></li>
</ul>

Untuk pencocokan tepat (mis. Negara bagian?) Gunakan $state.name === 'full/path/to/state'atauui-sref-active-eq="active"

Inilah solusi lain untuk siapa saja yang mungkin tertarik. Keuntungan dari ini adalah ia memiliki lebih sedikit ketergantungan. Heck, itu bekerja tanpa server web juga. Jadi itu sepenuhnya sisi klien.

HTML:

<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl"">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
    </div>
    <ul class="nav navbar-nav">
        <li ng-click="selectTab()" ng-class="getTabClass()"><a href="#">Home</a></li>
        <li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ tab }}</a></li>
    </ul>
</div>

Penjelasan:

Di sini kita membuat tautan secara dinamis dari model angular menggunakan direktif ng-repeat. Magic terjadi dengan metode selectTab()dan getTabClass()didefinisikan dalam controller untuk navbar ini yang disajikan di bawah ini.

Pengendali:

angular.module("app.NavigationControllersModule", [])

// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the <li> element that is selected.
.constant("activeTab", "active")

.controller("topNavBarCtrl", function($scope, activeTab){
    // Model used for the ng-repeat directive in the template.
    $scope.tabs = ["Page 1", "Page 2", "Page 3"];

    var selectedTab = null;

    // Sets the selectedTab.
    $scope.selectTab = function(newTab){
       selectedTab = newTab;
    };

    // Sets class of the selectedTab to 'active'.
    $scope.getTabClass = function(tab){
       return selectedTab == tab ? activeTab : "";
    };
});

Penjelasan:

selectTab()Metode ini disebut menggunakan ng-clickdirektif. Jadi ketika tautan diklik, variabelnyaselectedTab diatur ke nama tautan ini. Dalam HTML Anda dapat melihat bahwa metode ini dipanggil tanpa argumen untuk tab Beranda sehingga akan disorot ketika halaman dimuat.

The getTabClass()metode ini disebut melalui ng-classdirektif dalam HTML. Metode ini memeriksa apakah tab itu sama dengan nilai selectedTabvariabel. Jika benar, ia mengembalikan "aktif" yang lain mengembalikan "" yang diterapkan sebagai nama kelas berdasarkan ng-classarahan. Lalu apa pun css yang telah Anda terapkan ke kelas activeakan diterapkan ke tab yang dipilih.

Hanya Anda harus menambahkan active-class yang diperlukan dengan kode warna yang diperlukan.

Ex: ng-class="{'active': currentNavSelected}" ng-click="setNav"