कोणीय जेएस के साथ बूटस्ट्रैप नवबार सक्रिय वर्ग कैसे सेट करें?


306

अगर मेरे पास आइटम के साथ बूटस्ट्रैप में एक नावबार है

Home | About | Contact

सक्रिय होने पर मैं प्रत्येक मेनू आइटम के लिए सक्रिय वर्ग कैसे सेट करूं? यानी मैं कैसे सेट कर सकता हूंclass="active" कोणीय मार्ग होने पर

  1. #/ घर के लिए
  2. #/about पेज के बारे में
  3. #/contact संपर्क पृष्ठ के लिए


10
यह समान है, लेकिन नेविगेशन बटन को हाइलाइट करने का "कोणीय तरीका" नहीं है।
user1876508


यदि आप कोणीय मार्ग का उपयोग कर रहे हैं , तो कृपया ध्यान दें कि सही उत्तर नीचे दफन किया गया है: stackoverflow.com/a/43822400/474189
डंकन जोन्स

जवाबों:


598

एक बहुत ही सुंदर तरीका है, एनजी-कंट्रोलर का उपयोग एन-व्यू के बाहर एक सिंगल कंट्रोलर चलाने के लिए:

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

और नियंत्रकों में शामिल हैं। जेएस:

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

10
चूँकि मैं इसके लिए नया हूँ तो मैं सराहना करूँगा कि क्या आप इस बारे में एक उदाहरण प्रदान कर सकते हैं कि इसे हेडर निर्देश में कैसे डाला जाए।
14

41
मैं return $location.path().indexOf(viewLocation) == 0;इसके बजाय उपयोग करने का सुझाव देता हूं ताकि आप मापदंडों के साथ पृष्ठों को भी पकड़ सकें
स्वेन हेचट

7
यह काम किया है, लेकिन इसके लिए शायद ही हो जाता है elegantरास्ता नाम जैसे - /dogsकरने के लिए कॉल में दोहराया जाना हैisActive('/dogs')
वाल

7
यदि आप यूआई राउटर का उपयोग कर रहे हैं, तो आप ui-sref-active/ui-sref-active-eqनिर्देशों का उपयोग कर सकते हैं , अर्थात। ui-sref-active-eq='active'या ui-sref-active='active'उसी परिणाम को प्राप्त करने के लिए
डैन पेंट्री

10
@ SvenHecht उस तर्क के साथ चिंता यह है कि एक होम पेज लिंक (/) हर दूसरे पथ से मेल खाएगा।
mwotton

51

मैंने इसे संभालने के लिए सिर्फ एक निर्देश लिखा है, इसलिए आप केवल bs-active-linkमूल <ul>तत्व में विशेषता जोड़ सकते हैं , और किसी भी समय मार्ग बदल जाने पर, यह मिलान लिंक ढूंढ लेगा, और activeवर्ग को संबंधित में जोड़ देगा <li>

आप इसे यहां कार्रवाई में देख सकते हैं: http://jsfiddle.net/8mcedv3b/

उदाहरण HTML:

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

जावास्क्रिप्ट:

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

1
मुझे यह स्वीकार किए गए उत्तर से बेहतर लगता है क्योंकि कॉन्फिग डेटा का कोई दोहराव नहीं है, अर्थात मार्ग स्वयं एक ही स्थान पर बने रहते हैं और यह काम करता है ..
एरोन एनोडाइड

1
मेरे लिए गुंजाइश का उपयोग करके काम किया। $ घड़ी ("$ मार्ग परिवर्तन", समारोह) () {.... गुंजाइश के बजाय। $ पर ("$ मार्ग परिवर्तन" असफल), समारोह () {...
22

मेरे अपने उद्देश्यों के लिए इसे थोड़ा मोड़ना था, लेकिन भयानक जवाब! समझने में काफी आसान।
टोनी अंजियानो

38

आप AngularStrap पर एक नज़र डाल सकते हैं, नावबार निर्देश आपको लगता है कि आप क्या देख रहे हैं:

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

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

इस निर्देश का उपयोग करने के लिए:

  1. डाउनलोड AngularStrap से http://mgcrea.github.io/angular-strap/

  2. Bootstrap.js के बाद अपने पृष्ठ पर स्क्रिप्ट शामिल करें:
    <script src="lib/angular-strap.js"></script>

  3. अपने मॉड्यूल में निर्देश जोड़ें:
    angular.module('myApp', ['$strap.directives'])

  4. अपने नावबार में निर्देश जोड़ें:
    <div class="navbar" bs-navbar>

  5. प्रत्येक नौसेना आइटम पर regexes जोड़ें:
    <li data-match-route="/about"><a href="#/about">About</a></li>


1
धन्यवाद। इससे मुझे अपने खुद के निर्देश (मेरे लिए गुम अंतर्दृष्टि scope.$watch) को ठीक करने में मदद मिली
न्योर नगा

elementजक्वेरी चयनकर्ता को चर क्यों दिया जाता है? $('...', element)
लूसियो

JQuery (चयनकर्ता, संदर्भ) - - @Lucio विधि 2 तर्क लेता है अधिक पढ़ सकते हैं - दूसरा तर्क है, या तो माता-पिता डोम तत्व या किसी अन्य jQuery वस्तु ही चयनकर्ता के संदर्भ पारित करने के लिए है यहाँ
CoderTR

यह मेरे लिए पूरी तरह से काम करता है - मुझे हालांकि एक बदलाव करना था, प्रति mgcrea.github.io/angular-strap पर अपने मॉड्यूल में जोड़ने का निर्देश mgcrea.ngStrapनहीं है$strap.directives
Vixxd

33

यहां एक सरल दृष्टिकोण है जो एंगुलर के साथ अच्छी तरह से काम करता है।

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

अपने AngularJS नियंत्रक के भीतर:

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

2
अच्छा तरीका। मैंने इसे थोड़ा संशोधित किया - एनजी-क्लास निर्देश (एनजी-क्लास = {सक्रिय: isActive ('/ View1')}) का उपयोग किया और वर्ग नाम के बजाय सही / गलत वापस करने के लिए isActive फ़ंक्शन को अपडेट किया।
पटेल

मैंने आपके उदाहरण की तरह सब कुछ कॉपी किया है, और मेरे लिए $ स्थान.पाथ () काम नहीं किया ... $ स्थान पर स्विच किया गया ।url (), और यह काम किया!
पाउलो ओलिवेरा

14

यदि आप कोणीय राउटर के साथ काम कर रहे हैं, तो RouterLinkActive निर्देश का उपयोग वास्तव में सुरुचिपूर्ण ढंग से किया जा सकता है:

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

2
मुझे लगता है कि यह स्वीकृत उत्तर होना चाहिए (कोणीय 2+ के लिए कम से कम), क्यों लागू कुछ पहले से ही लागू है? लेकिन बूटस्ट्रैप 3.3 के लिए activeवर्ग में होना चाहिए <li>(आप राउटरलिंक को राउटरलिंक या उसके अभिभावक के साथ लगा सकते हैं)
फोनिक्स

3
नोट: यदि आप /अपने होम पेज के रूप में उपयोग करते हैं, routerLinkActiveतो किसी भी URL के लिए सक्रिय होने पर विचार करेंगे /, जैसे /foo/, /foo/barआदि, बिल्कुल मेल खाने के लिए, आपकी आवश्यकता है routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"
डंकन जोन्स

8

सबसे पहले और सबसे महत्वपूर्ण, इस समस्या को बहुत तरीकों से हल किया जा सकता है। यह तरीका सबसे सुरुचिपूर्ण नहीं हो सकता है, लेकिन यह सावधानी से काम करता है।

यहां एक सरल समाधान है जिसे आपको किसी भी परियोजना में जोड़ने में सक्षम होना चाहिए। जब आप अपने मार्ग को कॉन्फ़िगर करते हैं, जिसका उपयोग आप कुंजी बंद करने के लिए कर सकते हैं, तो आप केवल "पेजकेय" या कुछ अन्य संपत्ति जोड़ सकते हैं। इसके अतिरिक्त, आप एक मार्ग परिवर्तन के सफल समापन के लिए सुनने के लिए $ मार्ग वस्तु के $ मार्ग परिवर्तन के एक श्रोता को लागू कर सकते हैं।

जब आपका हैंडलर फायर करता है तो आपको पृष्ठ कुंजी मिलती है, और इस कुंजी का उपयोग उन तत्वों का पता लगाने के लिए किया जाता है, जिन्हें इस पृष्ठ के लिए "सक्रिय" होने की आवश्यकता होती है, और आप सक्रिय वर्ग को लागू करते हैं।

ध्यान रखें कि आपको सभी तत्वों को "सक्रिय" बनाने का एक तरीका चाहिए। जैसा कि आप देख सकते हैं कि मैं अपने नेवी आइटम्स पर .pageKey क्लास का उपयोग कर रहा हूं ताकि वे सभी बंद हो जाएं, और मैं व्यक्तिगत रूप से उन्हें चालू करने के लिए .pageKey_ {PAGEKEY} का उपयोग कर रहा हूं। उन सभी को निष्क्रिय करने के लिए स्विच करना, एक भोली दृष्टिकोण माना जाएगा, संभवतः आप केवल सक्रिय आइटम को निष्क्रिय बनाने के लिए पिछले मार्ग का उपयोग करके बेहतर प्रदर्शन प्राप्त करेंगे, या आप केवल चयन किए जाने वाले सक्रिय आइटमों को निष्क्रिय करने के लिए jquery चयनकर्ता को बदल सकते हैं। सभी सक्रिय वस्तुओं का चयन करने के लिए jquery का उपयोग करना शायद सबसे अच्छा समाधान है क्योंकि यह सुनिश्चित करता है कि पिछले रूट पर मौजूद किसी भी सीएसएस बग के मामले में वर्तमान मार्ग के लिए सब कुछ साफ हो जाए।

इसका मतलब होगा कि कोड की इस लाइन को बदलना:

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

यह एक करने के लिए

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

यहाँ कुछ नमूना कोड है:

के बूटस्ट्रैप नेवरबार को देखते हुए

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

और निम्न की तरह एक कोणीय मॉड्यूल और नियंत्रक:

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

आपको मार्गों पर पेजके मान देखने के लिए दाईं ओर स्क्रॉल करना होगा, यही इस संपूर्ण समाधान की कुंजी है।
पर Ramp51

16
यह काम कर सकता है, लेकिन Angular.js ऐप्स के लिए सामान्य सलाह के विरुद्ध है: कोणीय में आपको jQuery का उपयोग करके DOM के साथ खिलवाड़ करने से बचना चाहिए; यदि आपको DOM को टच करना है, तो एक निर्देश लिखें।
पाउलो स्कार्डिन

यह सही है, अगर डोम आपको परेशान करता है, तो बस .navbar पर एक निर्देश जोड़ें, रूचिनेस्क्यूसीट में $ ब्रॉडकास्ट इवेंट, $ rootScope जोड़ें। $ ब्रॉडकास्ट ('pathChanged', current.pagebey); और फिर इसे अपने निर्देश पर कब्जा कर लो और वहाँ डोम हेरफेर करें
इरशू

7

आप वास्तव में कोणीय-यूआई-बर्तनों के 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>

या:

हैडर नियंत्रक

/**
 * 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.'
      }
    ];
  });

सूचि पन्ना

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

यदि आप यूआई-बर्तनों का उपयोग कर रहे हैं, तो आपको आंशिक / नेस्टेड विचारों के प्रबंधन के लिए यूआई-राउटर में भी रुचि हो सकती है ।


यूआई-मार्ग का दृष्टिकोण बहुत ही आकर्षक है, लेकिन अभी तक मैं इसे योमन के कोणीय जनरेटर द्वारा निर्मित परियोजना पर काम करने का प्रबंधन नहीं करता था।
गबुजो

@gabuzo: क्या आपने कोणीय-यूआई-बर्तनों को बोवर के माध्यम से स्थापित किया था?
लेसे मेजेस्टे सेप

6

मुझे लगता है कि ये सभी उत्तर मेरे लिए जटिल हैं, क्षमा करें। इसलिए मैंने एक छोटा निर्देश तैयार किया है जो प्रति नेवबार के आधार पर काम करना चाहिए:

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

उपयोग:

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

आपके द्वारा नेव बार में लिंक पर क्लिक करने के बाद ही आपकी विधि काम करती है। यदि आप एक URL पर शुरू करते हैं जो "Foo" है, तो "होम" शुरू में अभी भी चुना जाएगा। उदाहरण के लिए, लोकलहोस्ट पर शुरू करना : 9000 / # / कॉन्टेक्ट के कारण होम नेवी बार में चुना गया है।
एडम प्लोचर

5

मैं इसे प्राप्त करने के लिए $ स्थान के साथ एनजी-क्लास निर्देश का उपयोग करता हूं।

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

यह इस तरह $ स्थान सेवा के लिए उपयोग के साथ एक मुख्य नियंत्रक के अंदर रहने के लिए नेबर की आवश्यकता है:

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

4

आप इसे कोणीय अभिव्यक्ति में एक सशर्त के साथ प्राप्त कर सकते हैं, जैसे:

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

यह कहा जा रहा है, मुझे ऐसा करने का अधिक "उचित" तरीका होने के लिए कोणीय निर्देश लगता है, भले ही इस मिनी-लॉजिक के बहुत से आउटसोर्सिंग आपके कोड आधार को कुछ हद तक प्रदूषित कर सकते हैं।

मैं विकास के दौरान हर बार GUI स्टाइल के लिए सशर्त का उपयोग करता हूं, क्योंकि यह निर्देश बनाने की तुलना में थोड़ा तेज है। मैं आपको एक उदाहरण नहीं बता सकता, जिसमें वे वास्तव में लंबे समय तक कोड आधार में बने रहे। अंत में मैं या तो इसे एक निर्देशन में बदल देता हूं या समस्या को हल करने का बेहतर तरीका ढूंढता हूं।


4

यदि आप यूआई-राउटर का उपयोग करते हैं , तो निम्न उदाहरण को किसी भी नियंत्रक-साइड कोड को जोड़े बिना स्वीकृत उत्तर पर @ DanPantry की टिप्पणी के आधार पर अपनी आवश्यकताओं को पूरा करना चाहिए:

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

आप इस पर अधिक जानकारी के लिए डॉक्स की जांच कर सकते हैं ।


उत्तम! निश्चित रूप से सबसे साफ समाधान
आर्य बेथ्ज जूल

बस सबसे अच्छा समाधान जा रहा है। कौन उपयोग नहीं करता है ui.router!
ओस

3

यदि आप बजाय AngularStrap का उपयोग नहीं करेंगे तो यह निर्देश चाल करना चाहिए! यह https://stackoverflow.com/a/16231859/910764 का एक संशोधन है ।

जावास्क्रिप्ट

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

एचटीएमएल

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

नोट: उपरोक्त HTML कक्षाएं मानती हैं कि आप बूटस्ट्रैप 3.x का उपयोग कर रहे हैं


3

हेयर्स माय टेक ऑन इट। इस पोस्ट पर मिले जवाबों का एक छोटा सा संयोजन। मेरे पास थोड़ा अलग मामला था, इसलिए मेरे समाधान में मेनू को अपने स्वयं के टेम्पलेट में अलग करना शामिल है जो कि डायरेक्टिव डेफिनिशन ओजेबेट के भीतर उपयोग किया जाना है और फिर उस पृष्ठ पर अपना नौबार जोड़ें जिसे मुझे इसकी आवश्यकता थी। मूल रूप से, मेरे पास एक लॉगिन पृष्ठ था, जिस पर मैंने अपना मेनू शामिल नहीं किया था, इसलिए मैंने ngInclude का उपयोग किया और लॉगिन करते समय यह निर्देश सम्मिलित किया:

निर्देशक:

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;

        }
    }
 }
});

प्रत्यक्ष थीम (टेम्पलेट / 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 किस उद्देश्य को शामिल करता है

<comp-navbar/>

उम्मीद है की यह मदद करेगा


1
फ़ंक्शन को केवल $ गुंजाइश तक छोटा किया जा सकता है। सक्रिय = फ़ंक्शन (व्यूअलोकेशन) {रिटर्न व्यूअलोकेशन === $ लोकेशन।पैथ (); };
WP McNeill

2

Myl उत्तर का विस्तार करते हुए, मुझे इस तरह की संरचना को संभालने के लिए इसकी आवश्यकता थी।

-index

-विभक्ति <-active
--- घटना-सूची
--- घटना-संपादन
--- घटना-नक्शा <-clicked

-प्लेस
--- स्थान-सूची
--- स्थान-संपादन
--- स्थान-नक्शा

इसलिए मिलान के बजाय, मुझे इंडेक्सऑफ का उपयोग करना था, ताकि बच्चों के लिंक को मान्य किया जा सके, जो कि हालत से मेल खाने के लिए तैयार हैं। तो 'घटनाओं' के लिए:

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

2

यह एक सरल उपाय है

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

1

@ ओलिवियर के एंगुलरस्ट्रेप उत्तर के साथ संयोजन में, मैंने kevinknelson के उत्तर को भी यहां से लागू किया: https://github.com/twbs/bootstrap/issues/9013

मूल रूप से, बूटस्ट्रैव नेवबार को एक-पृष्ठ (जैसे कोणीय) अनुप्रयोग के लिए डिज़ाइन नहीं किया गया था और इस प्रकार मेनू जब एक छोटी स्क्रीन पर क्लिक नहीं हो रहा था।


1

जावास्क्रिप्ट

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

एचटीएमएल

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

यह काम नहीं करता है - यह डोम में वर्तमान वर्ग को नहीं जोड़ता है
TheBlackBenzKid

1

@Pylinux को धन्यवाद । मैंने उनकी तकनीक का उपयोग किया है और ड्रॉप डाउन मेनू (सब उल / ली) के "एक" स्तर का समर्थन करने के लिए इसे संशोधित किया है, जैसा कि मुझे चाहिए था। इसे नीचे दिए गए फ़िडल लिंक में कार्रवाई में देखें।

पाइलिनक्स के उत्तर के आधार पर फिडेल अपडेट किया गया - http://jsfiddle.net/abhatia/en4qxw6g/

एक स्तर ड्रॉप डाउन मेनू का समर्थन करने के लिए मैंने निम्नलिखित तीन बदलाव किए:
1. ली के तहत "ए" तत्व के लिए डीडी (ड्रॉपडाउन) का एक वर्ग मान जोड़ा गया, जिसकी उप उल सूची की आवश्यकता है।

         <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. निम्नलिखित नए तर्क को जोड़ने के लिए जावास्क्रिप्ट को अपडेट किया गया।

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


3. अद्यतन सीएसएस निम्नलिखित जोड़ने के लिए:

a.active {background-color:red;}

उम्मीद है कि यह एकल स्तर ड्रॉपडाउन मेनू को लागू करने के इच्छुक किसी व्यक्ति के लिए उपयोगी होगा।


1

स्विच चर के रूप में किसी ऑब्जेक्ट का उपयोग करें।
आप इस इनलाइन को काफी सरलता से कर सकते हैं:

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

हर बार जब आप किसी लिंक पर क्लिक करते हैं तो स्विच ऑब्जेक्ट को एक नई ऑब्जेक्ट द्वारा बदल दिया जाता है, जहां केवल सही स्विच ऑब्जेक्ट गुण सत्य होता है। अपरिभाषित गुणधर्म असत्य के रूप में मूल्यांकन करेंगे और इसलिए जो तत्व उन पर निर्भर हैं उन्हें सक्रिय वर्ग को सौंपा नहीं जाएगा।



0

मैं एक लिंक पर एक निर्देश का उपयोग करने का सुझाव देता हूं। यहाँ है बेला।

लेकिन अभी तक यह सही नहीं है। हैशबैंग के लिए बाहर देखो;)

यहाँ निर्देशन के लिए जावास्क्रिप्ट है:

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

और यहाँ इसका उपयोग 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>

सीएसएस के साथ बाद में स्टाइल:

.active{ color:red; }

0

सिर्फ बहस में अपने दो सेंट जोड़ने के लिए मैंने एक शुद्ध कोणीय मॉड्यूल (कोई jquery) नहीं बनाया है, और यह हैश urls युक्त डेटा के साथ भी काम करेगा। ( ig #/this/is/path?this=is&some=data )

आप बस मॉड्यूल को एक निर्भरता के रूप में और auto-activeमेनू के पूर्वजों में से एक में जोड़ते हैं । ऐशे ही:

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

और मॉड्यूल इस तरह दिखता है:

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

* (आप केवल निर्देश भाग का उपयोग कर सकते हैं)

** यह भी ध्यान देने योग्य है कि यह खाली हैश ( ig example.com/# या सिर्फ example.com) के लिए काम नहीं करता है, इसके लिए कम से कम example.com/#/या बस आवश्यक है example.com#/। लेकिन यह स्वचालित रूप से ngResource और पसंद के साथ होता है।


यह सिर्फ बुरा है। कोणीय का उपयोग करने का कारण सादगी के लिए है।
टॉम स्टिकेल

0

इसने मेरे लिए चाल चली:

  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

तब आप वर्ग सक्रिय जोड़ने के लिए jquery (कोणीय के साथ भी काम करता है) का उपयोग करते हैं

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

और बेशक सीएसएस:

.active{background:red;}

यह काम करता है यदि आपके पास अपना HTML इस तरह है:

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

यदि यह www.somesite.com/ee thaen ee 'ऐप' है और यह सक्रिय हो जाएगा, तो यह पृष्ठ url का उपयोग करके कक्षा को सक्रिय रूप से जोड़ देगा और आपकी पृष्ठभूमि को लाल रंग में रंग देगा।


0

यह लंबे समय से उत्तर दिया गया है लेकिन मुझे लगा कि मैं अपना रास्ता साझा करूंगा:

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

टेम्पलेट:

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

उपयोग करने वालों के लिए 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>

सटीक मिलान के लिए (उदाहरण के लिए नेस्टेड अवस्थाएँ?) का उपयोग करें $state.name === 'full/path/to/state'याui-sref-active-eq="active"


0

यहाँ किसी के लिए एक और समाधान है जो रुचि हो सकती है। इसका फायदा यह है कि इसकी निर्भरता कम होती है। बिल्ली, यह एक वेब सर्वर के बिना भी काम करता है। तो यह पूरी तरह से क्लाइंट-साइड है।

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>

स्पष्टीकरण:

यहाँ हम निर्देशन का उपयोग कर कोणीय मॉडल से गतिशील रूप से लिंक उत्पन्न कर रहे हैं ng-repeat। जादू विधियों के साथ होता है selectTab()और getTabClass()नीचे प्रस्तुत इस नावबार के लिए नियंत्रक में परिभाषित किया गया है।

नियंत्रक:

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

स्पष्टीकरण:

selectTab()ng-clickनिर्देशन का उपयोग करते हुए विधि को कहा जाता है । इसलिए जब लिंक पर क्लिक किया जाता है, तो चरselectedTab को इस लिंक के नाम पर सेट किया जाता है। HTML में आप देख सकते हैं कि इस पद्धति को होम टैब के लिए बिना किसी तर्क के बुलाया जाता है ताकि पृष्ठ लोड होने पर इसे हाइलाइट किया जा सके।

getTabClass()विधि के माध्यम से कहा जाता है ng-classHTML में निर्देश। यह विधि यह जाँचती है कि यह जिस टैब में है वह selectedTabवैरिएबल के मान के समान है । अगर यह सच है, तो यह "सक्रिय" और रिटर्न देता है "" जिसे ng-classनिर्देश द्वारा वर्ग के नाम के रूप में लागू किया जाता है । फिर आपने क्लास में जो भी css लागू activeकिया है, वह चयनित टैब पर लागू होगा।


मैं किसी अन्य माध्यम से किसी अन्य टैब पर किस खुशी में नेविगेट कर सकता हूं?
मिगुएल कार्वाजल

क्या मतलब?
कोवैक

उदाहरण के लिए पृष्ठ में एक लिंक जो आपको दूसरे पृष्ठ पर ले जाता है जो अन्य टैब के भीतर है। समझ में आता है?
मिगुएल कार्वाजल

उस स्थिति में, मुझे लगता है कि उली-राउटर का उपयोग करना बेहतर है जैसा कि ऊपर दिए गए उत्तर में मूली युलज़ारी द्वारा सुझाया गया है। यूआई-राउटर प्रत्येक यूआरएल को एक राज्य प्रदान करता है। इसलिए, जैसे ही कोई लिंक पर क्लिक करता है, उपयोगकर्ता को उस लिंक पर भेज दिया जाएगा और कोणीय ऐप की स्थिति को अपडेट कर दिया जाएगा। तब ui-sref = "सक्रिय" टैब को उजागर करेगा। यहाँ कोणीय 2 के लिए प्रलेखन है: ui-router.github.io/ng2 । इसके अलावा, सामान्य बूटस्ट्रैप का उपयोग करने के बजाय कोणीय ऐप के साथ उपयोग के लिए किए गए UI बूटस्ट्रैप को देखें। UI बूटस्ट्रैप: कोणीय-ui.github.io/bootstrap
kovac

0

बस आपको activeआवश्यक रंग कोड के साथ आवश्यक -क्लास जोड़ना होगा ।

उदाहरण के लिए: ng-class="{'active': currentNavSelected}" ng-click="setNav"

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.