javascript - কিভাবে Angular JS সঙ্গে বুটস্ট্র্যাপ Navbar সক্রিয় ক্লাস সেট করবেন?




twitter-bootstrap angularjs angularjs-directive (22)

আমি আইটেম সঙ্গে বুটস্ট্র্যাপ একটি navbar আছে

Home | About | Contact

যখন তারা সক্রিয় থাকে তখন প্রতিটি মেনু আইটেমের জন্য কীভাবে সক্রিয় শ্রেণী সেট করব? অর্থাৎ, কৌণিক রুটটি যখন আমি class="active" সেট করতে পারি

  1. #/ বাড়িতে জন্য
  2. #/about প্রায় পৃষ্ঠার জন্য
  3. #/contact যোগাযোগের পৃষ্ঠার জন্য যোগাযোগ করুন

Answers

একটি সুইচ পরিবর্তনশীল হিসাবে একটি বস্তু ব্যবহার করুন।
আপনি বেশ সহজভাবে এই ইনলাইন করতে পারেন:

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

প্রতিবার আপনি কোনও লিঙ্কে ক্লিক করলে সুইচ অবজেক্টটি একটি নতুন বস্তুর দ্বারা প্রতিস্থাপিত হয় যেখানে শুধুমাত্র সঠিক সুইচ বস্তুর সম্পত্তি সত্য। অনির্ধারিত বৈশিষ্ট্য মিথ্যা হিসাবে মূল্যায়ন করা হবে এবং তাই তাদের উপর নির্ভর করে উপাদান সক্রিয় শ্রেণী নির্ধারিত হবে না।


যদি আপনি ui- ui-router ব্যবহার করেন, তবে নিম্নলিখিত উদাহরণটি আপনার কন্ট্রোলার-সাইড কোড ব্যতীত গ্রহণযোগ্য উত্তরের @ ড্যানপ্যান্ট্রি এর মন্তব্যের উপর ভিত্তি করে আপনার চাহিদাগুলি পূরণ করবে:

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

আপনি আরো তথ্যের জন্য docs চেক করতে পারেন।


প্রথম এবং সর্বাগ্রে, এই সমস্যা অনেক উপায়ে সমাধান করা যেতে পারে। এই ভাবে সবচেয়ে মার্জিত হতে পারে না, কিন্তু এটি আন্তরিকভাবে কাজ করে।

এখানে আপনি একটি প্রকল্প যোগ করতে সক্ষম হওয়া উচিত একটি সহজ সমাধান। আপনি যখন আপনার রুটটি কনফিগার করতে পারেন তখন আপনি কেবল "পৃষ্ঠাকি" বা অন্য কোনও সম্পত্তি যুক্ত করতে পারেন। উপরন্তু, রুট পরিবর্তনের সফল সমাপ্তির জন্য আপনি $ রুট অবজেক্টের $ রুটChangeSuccess পদ্ধতিতে একটি শ্রোতা বাস্তবায়ন করতে পারেন।

যখন আপনার হ্যান্ডলার আপনাকে পৃষ্ঠা কীটি পায় তখন এই পৃষ্ঠার জন্য "সক্রিয়" থাকা উপাদানগুলি সনাক্ত করতে সেই কীটি ব্যবহার করুন এবং আপনি ACTIVE ক্লাসটি প্রয়োগ করেন।

মনে রাখবেন আপনার সমস্ত উপাদানগুলি "কার্যকর" করার একটি উপায় দরকার। আপনি দেখতে পারেন যে আমি আমার এনভি আইটেমগুলিতে .pageKey ক্লাসটি ব্যবহার করে সব বন্ধ করে দেব এবং আমি তাদের পৃষ্ঠাটি পৃথকভাবে চালু করতে .pageKey_ {PAGEKEY} ব্যবহার করছি। তাদের সকলকে নিষ্ক্রিয় অবস্থায় স্যুইচ করা, একটি সাদাসিধা পদ্ধতি হিসাবে বিবেচিত হবে, সম্ভবত আপনি কেবলমাত্র সক্রিয় আইটেমগুলি নিষ্ক্রিয় করতে পূর্ববর্তী রুটটি ব্যবহার করে উন্নততর কর্মক্ষমতা পাবেন, অথবা আপনি jquery নির্বাচককে শুধুমাত্র নিষ্ক্রিয় করা সক্রিয় আইটেমগুলি নির্বাচন করতে পরিবর্তন করতে পারেন। সমস্ত সক্রিয় আইটেমগুলি নির্বাচন করার জন্য jquery ব্যবহার করা সম্ভবত সর্বোত্তম সমাধান কারণ এটি পূর্ববর্তী রুটে উপস্থিত থাকা কোনও CSS বাগগুলির ক্ষেত্রে বর্তমান রুটের জন্য সবকিছু পরিষ্কার করা নিশ্চিত করে।

যার মানে কোডের এই লাইনটি পরিবর্তন করা:

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

এই এক

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

এখানে কিছু নমুনা কোড আছে:

একটি বুটস্ট্র্যাপ navbar দেওয়া

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

Ng-view এর বাইরে একটি একক নিয়ামক চালানোর জন্য 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();
    };
}

আপনি এই সক্রিয়-লিঙ্ক নির্দেশিকাটি https://.com/a/23138152/1387163 ব্যবহার করতে পারেন

অবস্থান মিল / ইউআরএল সক্রিয় যখন মূল লি সক্রিয় গ্রুপ পাবেন:

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

আপনি AngularStrap এ একটি নজর রাখতে পারেন, navbar নির্দেশিকা আপনি যা খুঁজছেন তা মনে হচ্ছে:

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. Http://mgcrea.github.io/angular-strap/ থেকে AngularStrap ডাউনলোড করুন

  2. Bootstrap.js এর পরে আপনার পৃষ্ঠায় স্ক্রিপ্ট অন্তর্ভুক্ত করুন:
    <script src="lib/angular-strap.js"></script>

  3. আপনার মডিউল নির্দেশাবলী যোগ করুন:
    angular.module('myApp', ['$strap.directives'])

  4. আপনার navbar নির্দেশাবলী যোগ করুন:
    <div class="navbar" bs-navbar>

  5. প্রতিটি ন্যাভি আইটেমে regexes যোগ করুন:
    <li data-match-route="/about"><a href="#/about">About</a></li>


শুধু আপনাকে activeপ্রয়োজনীয় রঙ কোড দিয়ে প্রয়োজনীয়-ক্লাস যোগ করতে হবে ।

উদা: ng-class="{'active': currentNavSelected}" ng-click="setNav"


এখানে আগ্রহী হতে পারে যে কেউ জন্য আরেকটি সমাধান। এই সুবিধা কম নির্ভরশীলতা আছে। হ্যাক, এটি একটি ওয়েব সার্ভার ছাড়া কাজ করে। তাই এটি সম্পূর্ণরূপে ক্লায়েন্ট-পার্শ্ব।

এইচটিএমএল:

<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 ব্যবহার করে একটি angularjs মডেল থেকে গতিশীল লিঙ্ক লিঙ্ক তৈরি করা হয়। selectTab() নির্বাচন করে নির্বাচিত selectTab() এবং getTabClass() নিচের উপস্থাপিত 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 TAB এই লিঙ্কটির নামে সেট করা হয়। HTML এ আপনি দেখতে পারেন যে এই পদ্ধতিটিকে হোম ট্যাবের জন্য কোনও যুক্তি ছাড়াই বলা হয় যাতে পাতা লোড হওয়ার পরে এটি হাইলাইট করা হবে।

getTabClass() পদ্ধতিটি এইচটিএমএল ng-class নির্দেশিকা মাধ্যমে বলা হয়। এই ট্যাবটি যদি selectedTab তবে selectedTab ট্যাব পরিবর্তনশীলের মান হিসাবে একই পদ্ধতি পরীক্ষা করে। সত্য হলে, এটি "সক্রিয়" ফেরত দেয় এবং অন্যটি ফেরত "" যা ক্লাসের নাম হিসাবে ng-class নির্দেশিকা দ্বারা প্রয়োগ করা হয়। তারপর ক্লাসে active যে কোন CSS আপনি নির্বাচিত ট্যাবে প্রয়োগ করা হবে।


এটা আমার গ্রহণ। এই পোস্টে পাওয়া একটি সংমিশ্রণ সামান্য। আমার কিছুটা আলাদা ব্যাপার ছিল, তাই আমার সমাধানটিতে মেনুটিকে তার নিজের টেমপ্লেটে বিভক্ত করা হয়েছে যাতে ডাইরেক্টিভ ডেফিনিশন Ojbect এর মধ্যে ব্যবহার করা যায় তারপরে আমার ন্যাবার্ডটিকে আমার প্রয়োজনীয় পৃষ্ঠায় যুক্ত করুন। মূলত, আমার একটি লগইন পৃষ্ঠা ছিল যা আমি আমার মেনু অন্তর্ভুক্ত করতে চাইনি, তাই আমি লগ ইন করার সময় এনজিও অন্তর্ভুক্ত করে এবং এই নির্দেশটি সন্নিবেশ করলাম:

DIRECTIVE:

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>

এইচটিএমএল যা সরাসরি নির্দেশ করে

<comp-navbar/>

আশাকরি এটা সাহায্য করবে


এই দীর্ঘ উত্তর দেওয়া হয়েছে, কিন্তু আমি আমার উপায় শেয়ার করতে চাই:

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


আপনি যদি http://mgcrea.github.io/angular-strap/ ব্যবহার না করে তবে এই নির্দেশিকা কৌতুক করা উচিত! এটি https://.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>

দ্রষ্টব্য: উপরের এইচটিএমএল ক্লাস আপনি বুটস্ট্র্যাপ 3.x ব্যবহার করছেন অনুমান


@ ওলিভিয়ার এর AngularStrap উত্তর সহ, আমি kevinknelson এর উত্তরটি এখান থেকে প্রয়োগ করেছি: https://github.com/twbs/bootstrap/issues/9013

প্রকৃতপক্ষে, বুটস্ট্র্যাপ 3 নেভিবারটি একক পৃষ্ঠার জন্য ডিজাইন করা হয়নি (উদাহরণস্বরূপ কৌণিক) অ্যাপ্লিকেশন এবং এইভাবে মেনুতে ক্লিক করলে ছোট স্ক্রীনটি ভেঙ্গে যায় না।


এখানে 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>

আপনার AngularJS নিয়ামক মধ্যে:

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

জাভাস্ক্রিপ্ট

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

আমি একটি লিঙ্ক একটি নির্দেশ ব্যবহার করে সুপারিশ। Here উষ্ণ হয়।

কিন্তু এটা এখনো নিখুঁত নয়। হ্যাশব্যাংগুলির জন্য দেখুন;)

এখানে নির্দেশের জন্য জাভাস্ক্রিপ্ট হয়:

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

এবং এখানে এটি এইচটিএমএল ব্যবহার করা হবে কিভাবে:

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

পরে CSS সঙ্গে স্টাইলিং:

.active{ color:red; }

আমি শুধু এটি পরিচালনা করার জন্য একটি নির্দেশনা লিখেছি, তাই আপনি কেবলমাত্র parent bs-active-link <ul> element এর বৈশিষ্ট্যটি bs-active-link করতে পারেন, এবং যে কোনও সময় রুট পরিবর্তিত হলে, এটি মিলযুক্ত লিঙ্কটি খুঁজে পাবে এবং active শ্রেণীটিকে যুক্ত করবে সংশ্লিষ্ট <li>

আপনি এখানে এটি ক্রিয়া দেখতে পারেন: http://jsfiddle.net/8mcedv3b/

উদাহরণ এইচটিএমএল:

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

বিতর্কের মধ্যে আমার দুটি সেন্ট যোগ করার জন্য আমি একটি বিশুদ্ধ কৌণিক মডিউল তৈরি করেছি (কোন জ্যাকারি নেই), এবং এটি ডেটা ধারণকারী হ্যাশ urls সহও কাজ করবে। ( i.g. #/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);
            }
        }
    }]);
}());

* (আপনি অবশ্যই অবশ্যই নির্দেশ অংশ ব্যবহার করতে পারেন)

** এটাও মূল্যবান যে এটি খালি হ্যাশের জন্য কাজ করে না ( i.g. example.com/# বা just example.com ) এটি অন্তত example.com/#/ অথবা example.com#/ । কিন্তু এই ngResource এবং মত সঙ্গে স্বয়ংক্রিয়ভাবে ঘটবে।


এই আমার জন্য কৌশল ছিল:

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

এবং অবশ্যই CSS:

.active{background:red;}

এটি আপনার কাজ করে যদি এটির মতো আপনার HTML থাকে:

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

এটি হ'ল পৃষ্ঠা url ব্যবহার করে শ্রেণিবদ্ধভাবে সক্রিয় শ্রেণিকে যুক্ত করবে এবং আপনার পটভূমিটি লাল রঙে রঙ করবে যদি আপনার www.somesite.com/ee থানে ইই হয় 'অ্যাপ্লিকেশন' এবং এটি সক্রিয় থাকবে


আমি এটি অর্জন করার জন্য $ অবস্থান সঙ্গে এনজি ক্লাস নির্দেশ ব্যবহার।

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

এটি একটি সহজ সমাধান

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

@Pylinux ধন্যবাদ। আমি তার কৌশল ব্যবহার করেছি এবং ড্রপ ডাউন মেনু (সাব উল / লি) "এক" স্তরের সমর্থন করার জন্য এটিও সংশোধন করেছি, যা আমার দরকার ছিল। নীচের ভাঙ্গন লিঙ্ক মধ্যে এটি কর্ম দেখুন।

পাইলিনক্স এর উত্তরের উপর ভিত্তি করে আপডেটেড ফিডেল - http://jsfiddle.net/abhatia/en4qxw6g/

এক স্তর ড্রপ ডাউন মেনু সমর্থন করার জন্য আমি নিম্নলিখিত তিনটি পরিবর্তন করেছি:
1. লি এর অধীনে "a" উপাদানটির জন্য dd (ড্রপডাউন) এর একটি ক্লাস মান যোগ করা হয়েছে যা সাব উল তালিকা থাকা দরকার।

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

আশা করছি এই একক স্তরের ড্রপডাউন মেনু বাস্তবায়ন খুঁজছেন কেউ সহায়ক হবে।


আমি এই link সম্মুখীন একটি সমস্যা সমাধান করেছি এবং আমি আপনার প্রশ্নের জন্য একটি সহজ সমাধান খুঁজে বের করেছি। আপনি আপনার শৈলী পরিবর্তে router-link-active ব্যবহার করতে পারে।

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}




javascript twitter-bootstrap angularjs angularjs-directive navbar