angularjs에서 선택된 메뉴 항목을 표시하는 방법?

Question

AngularJS를 사용하여로드 된 응용 프로그램에 메뉴가 있으며 메뉴 항목을 클릭하면이 항목을 강조 표시해야합니다. 내 메뉴는 다음과 같습니다

<ul class="nav nav-stacked" data-ng-controller="ProjectListController" > 
    <li data-ng-repeat="project in projects" data-active-link="{{project.id}}"> 
    <a href="#/project/{{project.id}}">{{project.title}}</a> 
    </li> 
</ul> 

나는 나는 경우

$location.path() == '/project/project.id' 

내 각 지시어 I에 왔을 때이 문제를 확인해야이 지침의 프로젝트 ID를 전달하고 내부 지침을 만들 project.id에 대한 값이 없으므로 나중에 값이 할당되므로 $ location.path()에 $$이 아닌 텍스트 문자열로 'project/project.id'가 있습니다.

가장 좋은 방법은 무엇입니까? 그걸 할거야?

Answer 1

routeProvider에서 /project/:projectId 형식의 경로를 정의했다고 가정합니다. 당신이 당신의 ProjectListController에서 할 수있는 것은 당신이

을 할 수있는 당신은 당신의 HTML에

그런 다음 컨트롤러에 $routeParams 서비스를 주입 할 필요가

$scope.projectId=$routeParams.projectId; 변수 범위에 현재 projectid을 할당하는 것

<a href="#/project/{{project.id}}" ng-class="{selected:projectId===project.id}">{{project.title}}</a> 

이것은 경로 프로젝트 ID와 일치하는 앵커에 selected 클래스를 적용합니다.

$routeParams 서비스를 전달하면 같은 지시어를 사용할 수 있습니다.