클릭했을 때 angular js의 $ location.hash를 사용하여 html 요소의 색상을 변경하는 방법은 무엇입니까?

Question

나는 세 개의 버튼이 있습니다. 회사 소개, 및 서비스입니다. 버튼을 클릭 할 때마다 해시 값이 변경되며 라우팅 개념을 사용하여 다른 페이지로 이동합니다.

이제 AngularJS에서 $location.hash() 함수를 사용하고 해시 값이 변경 될 때마다 버튼의 색상을 변경하고 싶습니다. 여기에 내가 쓴 JS 각 코드의

<div ng-controller="mainController"> 
    <a href = "#/aboutus" ng-class="{'active': location == '/aboutus'}">About us</a> 
    <a href = "#/contactus" ng-class="{'active': location == '/contactus'}">Contact us</a> 
    <a href = "#/services" ng-class="{'active': location == '/services'}">Services</a> 
</div> 

:

나는 아래 작성한 코드를 참조

.active{ 
    background-color: red; 
    color : white; 
} 
a{ 
    padding:10px; 
    background-color: white; 
    color: black; 
    border: 1px solid black; 
} 

I 돈 : 여기

app.controller('mainController', ['$scope', '$location', function($scope,$location){ 
    var location = $location.hash(); 
}]); 

는 CSS의 코드의 문제점을 알고 있지만 색상을 얻을 수 없기 때문에 클래스를 클릭 할 때 태그에 추가되지 않습니다.

대신 당신은 범위에 당신이 변수 바인딩해야

var location = $location.hash; 

의 :

Answer 1

는 지금까지 두 가지 변화가 내가 볼 수있는대로 확인해야합니다. 그렇지 않으면 뷰/템플리트가 뷰/템플리트에 액세스 할 수 없습니다. 두 번째의 경우이

$scope.location = $location.hash; 

같은 속성으로 설정하여이를 수행 할 수 있습니다, 해시는 /로하지만 #로 시작하지 않습니다. 그러므로 이름 해쉬;). 그래서 내가 설정에 약간의 결함을 생각 예를 구축되면서 #aboutus 대신

/aboutus 업데이트, 새로운 제안

를 확인하려고합니다. 이것은 Angular가 변수를보고 범위 변경을 처리하기 때문입니다. 컨트롤러의 라우팅 및 강조 표시 로직을 유지하려면 다음 예제와 같이 설정하는 것이 좋습니다. 이를 통해 애플리케이션 기능 및 라우트 변경 사항을 처리하는 방법을 완벽하게 제어 할 수 있습니다.

angular.module('App', []); 
 

 
angular 
 
    .module('App') 
 
    .controller('Foo', ['$scope', function($scope) { 
 
    $scope.location = 'unset'; 
 
    $scope.setLocation = function(newLocation) { 
 
     console.log(newLocation); 
 
     $scope.location = newLocation; 
 
    }; 
 
}]);

a.active { 
 
    font-size: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="App"> 
 
<div ng-controller="Foo"> 
 
    <a href="#firstLocation" ng-click="setLocation('first')" ng-class="{active: location == 'first'}">First Location</a> 
 
    <a href="#somewhereElse" ng-click="setLocation('else')" ng-class="{active: location == 'else'}">Somewhere else</a> 
 
    <p>{{ location }}</p> 
 
</div> 
 
</div>

아직

나는 위의 코드를 사용하지 않는 것이 좋습니다 것이다. 대신 라우팅 로직에 연결하십시오. 경로 변경 이벤트를 처리하여 링크에서 올바른 클래스를 설정하기 위해 컨트롤러에서 읽은 서비스를 업데이트하십시오. 경로 변경을 보는 방법에 대한 자세한 내용은 How to watch for a route change in AngularJS?

이 방법의 장점은 현재 위치가 저장 한 정보와 일치한다는 것입니다. 응용 프로그램 전체를 탐색하는 데 추가 옵션을 제공하면 위치 변수가 자동으로 업데이트됩니다. 위의 설정은 실제 링크를 클릭 할 때만 추적됩니다.

는 당신에게 약간의 개요를 제공합니다 :

컨트롤러를
currentRoute -> 라우팅 서비스 현재 경로를

서비스
currentRoute 반환 - 마지막
setRoute 설정으로> 반환 경로를 -> 새로운 현재 경로를 설정하십시오.

라우팅 이벤트 핸들러 새로운 경로와 서비스에
전화 'setRoute'

Answer 2

당신은 기능을하고 JS에 NG-클래스에서 다음

<a href = "#/aboutus" ng-class = "{'active': isActive('/aboutus')}">About us</a> 
<a href = "#/contactus" ng-class = "{'active': isActive('/contactus')}">Contact us</a> 
<a href = "#/services" ng-class = "{'active': isActive('/services')}">Services</a> 

등을 전달할 수

$scope.isActive = function(url) { 
    return $location.path().indexOf(url) > -1; 
    }