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




twitter-bootstrap angularjs (18)

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

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

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

Home | About | Contact

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

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

Myl উত্তর প্রসারিত, আমি এই মত একটি কাঠামো হ্যান্ডেল করার জন্য এই প্রয়োজন।

-index

-events <-active
--- ঘটনা-তালিকা
--- ঘটনা-সম্পাদনা
--- ঘটনা-মানচিত্র <-clicked

-জায়গা
--- জায়গা-তালিকা
--- জায়গা-সম্পাদনা
--- জায়গা মানচিত্রে

তাই ম্যাচিংয়ের পরিবর্তে, আমি শর্তটি মেলে ধরার জন্য ফরম্যাট করা শিশুদের লিঙ্কগুলি যাচাই করার জন্য indexOf ব্যবহার করতে হয়েছিল। সুতরাং 'ঘটনা' জন্য:

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

আপনি 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>


আপনি আসলে 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>

বা:

হেডার কন্ট্রোলার

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

যদি আপনি ui-utils ব্যবহার করেন তবে আপনি আংশিক / নীচের দৃশ্যগুলি পরিচালনা করার জন্য ui-router আগ্রহী হতে পারেন।


আপনি একটি কৌণিক অভিব্যক্তি একটি শর্তাধীন সঙ্গে অর্জন করতে পারেন, যেমন:

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

যে বলছে, আমি একটি কৌণিক নির্দেশিকা এটি করার আরও "সঠিক" উপায় খুঁজে পাই, যদিও এই ক্ষুদ্র-লজিকের আউটসোর্সিং অনেক কিছু আপনার কোড বেসটি দূষিত করতে পারে।

আমি উন্নয়ন সময় সময় প্রতি একবার GUI স্টাইলিং জন্য শর্তাবলী ব্যবহার, কারণ এটা নির্দেশাবলী তৈরি তুলনায় একটু দ্রুত। আমি আপনাকে একটি উদাহরণ বলতে পারিনি যদিও তারা আসলে দীর্ঘ কোড কোডে রয়ে গেছে। শেষ পর্যন্ত আমি এটি একটি নির্দেশিকা মধ্যে চালু বা সমস্যা সমাধানের জন্য একটি ভাল উপায় খুঁজে।


আপনি যদি 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 ব্যবহার করছেন অনুমান


আমি একটি লিঙ্ক একটি নির্দেশ ব্যবহার করে সুপারিশ। 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; }

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

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

আমি শুধু এটি পরিচালনা করার জন্য একটি নির্দেশনা লিখেছি, তাই আপনি কেবলমাত্র 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');   
                };
            });     
        });
    }
}
}]);

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

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

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


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

এটা আমার গ্রহণ। এই পোস্টে পাওয়া একটি সংমিশ্রণ সামান্য। আমার কিছুটা আলাদা ব্যাপার ছিল, তাই আমার সমাধানটিতে মেনুটিকে তার নিজের টেমপ্লেটে বিভক্ত করা হয়েছে যাতে ডাইরেক্টিভ ডেফিনিশন 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/>

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


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

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

বিতর্কের মধ্যে আমার দুটি সেন্ট যোগ করার জন্য আমি একটি বিশুদ্ধ কৌণিক মডিউল তৈরি করেছি (কোন জ্যাকারি নেই), এবং এটি ডেটা ধারণকারী হ্যাশ 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 এবং মত সঙ্গে স্বয়ংক্রিয়ভাবে ঘটবে।


যদি আপনি 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 চেক করতে পারেন।


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

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


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

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







navbar