[javascript] Angular JS로 부트 스트랩 navbar 활성 클래스를 설정하는 방법은 무엇입니까?

우선,이 문제는 많은 방법으로 해결 될 수 있습니다. 이 방법은 가장 우아하지는 않지만 확실히 작동합니다.

다음은 모든 프로젝트에 추가 할 수있는 간단한 솔루션입니다. 키 오프에 사용할 경로를 구성 할 때 “pageKey”또는 다른 속성을 추가하면됩니다. 또한 $ route 객체의 $ routeChangeSuccess 메서드에서 리스너를 구현하여 경로 변경이 성공적으로 완료되었음을 수신 할 수 있습니다.

핸들러가 시작되면 페이지 키를 얻고이 키를 사용하여이 페이지에 대해 “ACTIVE”여야하는 요소를 찾고 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>

답변

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