각도를 사용하여 현재 페이지의 링크를 강조 표시하려면 어떻게합니까?

내 페이지에서 각도 라우팅을 사용하고 있으며 현재 콘텐츠에 해당하는 메뉴 항목을 강조하고 싶습니다.각도를 사용하여 현재 페이지의 링크를 강조 표시하려면 어떻게합니까?

나는 in this post처럼 ngClass 및 컨트롤러를 사용하려하지만 아무런 영향 여기

가없는 코드입니다 :

index.html을

<body ng-app="sApp"> 
<div ng-controller="NavCtrl" class="nav"> 
    <ul> 
    <li ng-class="{ active-btn: isActive('/')}"> 
     <a href="#" class="menu-btn">HOME</a> 
    </li> 
    <li ng-class="{ active-btn: isActive('/1')}"> 
     <a href="#/1" class="menu-btn">PAGE1</a> 
    </li> 
    <li ng-class="{ active-btn: isActive('/2')}"> 
     <a href="#/2" class="menu-btn">PAGE2</a> 
    </li> 
    </ul> 
</div> 
<div class="content" ng-view=""></div>

있는 style.css

.nav { 
    padding: 1rem; 
    text-align: center; 
    background-color: #ffa500; 
} 
.nav ul li { 
    display: inline; 
    font-weight: 700; 
} 
.menu-btn { 
    padding: 1rem; 
} 
.menu-btn:hover { 
    background-color: #ee82ee; 
} 
.active-btn { 
    background-color: #00f; 
}

script.js 여기

'use strict'; var sApp; sApp = angular.module('sApp', ['ngRoute']); sApp.config(function($routeProvider) { return $routeProvider .when('/', {templateUrl: 'h.html'}) .when('/1', {templateUrl: '1.html'}) .when('/2', {templateUrl: '2.html'}) .otherwise({redirectTo: '/'}); }); sApp.controller('NavCtrl', function($scope, $location) { $scope.isActive = function(viewLocation) { return viewLocation === $location.path(); }; });

는 plunker입니다 :

그것은에 클래스를 변경할 수없는 메뉴 항목과 같은 활성 btn을. 제발 도와 주실 수 있습니까?

출처

2014-09-08 damogari

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="sApp"> 
    <div ng-controller="NavCtrl" class="nav"> 
     <ul> 
     <li ng-class="classActive('/')"> 
      <a href="#" class="menu-btn">HOME</a> 
     </li> 
     <li ng-class="classActive('/1')"> 
      <a href="#/1" class="menu-btn">PAGE1</a> 
     </li> 
     <li ng-class="classActive('/2')"> 
      <a href="#/2" class="menu-btn">PAGE2</a> 
     </li> 
     </ul> 
    </div> 
    <div class="content" ng-view=""></div> 
    </body> 

</html>

그리고 script.js를

'use strict'; 
    var sApp; 

    sApp = angular.module('sApp', ['ngRoute']); 

    sApp.config(function($routeProvider) { 
    return $routeProvider 
    .when('/', {templateUrl: 'h.html'}) 
    .when('/1', {templateUrl: '1.html'}) 
    .when('/2', {templateUrl: '2.html'}) 
    .otherwise({redirectTo: '/'}); 
    }); 

    sApp.controller('NavCtrl', function($scope, $location) { 
    $scope.isActive = function(viewLocation) { 
     return viewLocation === $location.path(); 
    }; 

    $scope.classActive = function(viewLocation) { 
     if($scope.isActive(viewLocation)) { 
     return 'active-btn'; 
     } 
     else { 
     return 'inactive-btn'; 
     } 
    } 
    });

그것의 더 나은 같은 기능을 가지고, html로 너무 많은 로직을 넣지하기 이것은 훨씬 더 의미가 있습니다. 더 많은 감각은 모든 메뉴 내용을 객체에 넣고 객체를 반복하는 것입니다. 그런 다음 예를 들어 위치 액세스를 청취하고 클릭시 변경하지 않고 개체를 변경할 수 있습니다. 그런 식으로 클릭에 의존하지 않습니다.

어떻게 그렇게 할 것인가? 논리가 추상적 인 서비스에 머무를 수 있고 재사용이 가능하다.

Goodluck!

출처

2014-09-08 08:53:23 kfwerf

내 문제를 해결해 주셔서 감사합니다.) 제안하는대로 전체 메뉴를 만들려고합니다. – damogari

당신은 같은 것을 할 수 있습니다

<li ng-class="{active: $route.current.loadedTemplateUrl=='/1'}"> 
    My 1 active 
    </li>

출처

2014-09-08 08:50:48

각도를 사용하여 현재 페이지의 링크를 강조 표시하려면 어떻게합니까?

답변

관련 문제