디렉티브 내에서 현재 상태를 감지하는 방법

AngularUI의 라우팅을 사용하고 있는데,하고 싶지만 이와 같은 ng-class="{active: current.state}"지시문에서 현재 상태를 정확히 감지하는 방법을 잘 모르겠습니다.

또한 ui-sref-active 지시문을 사용할 수 있습니다 .

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

또는 필터 : "stateName" | isState&"stateName" | includedByState

최신 정보:

이 답변은 Ui-Router의 훨씬 오래된 릴리스에 대한 것입니다. 최신 릴리스 (0.2.5+)의 경우 helper 지시문을 사용하십시오 ui-sref-active. 자세한 내용은 여기 .

원래 답변 :

컨트롤러에 $ state 서비스를 포함합니다. 이 서비스를 범위의 속성에 할당 할 수 있습니다.

예 :

$scope.$state = $state;

그런 다음 템플릿에서 현재 상태를 가져 오려면 :

$state.current.name

상태가 현재 활성 상태인지 확인하려면 :

$state.includes('stateName'); 

이 메서드는 상태가 중첩 된 상태의 일부인 경우에도 포함 된 경우 true를 반환합니다. 중첩 상태에 있고을 user.details확인한 $state.includes('user')경우 true를 반환합니다.

클래스 예제에서 다음과 같이 할 수 있습니다.

ng-class="{active: $state.includes('stateName')}"

ui-router를 사용하는 경우 $ state.is ();

다음과 같이 사용할 수 있습니다.

$state.is('stateName');

당 문서 :

$ state.is ... $ state.includes와 유사하지만 전체 주 이름 만 확인합니다.

나를 위해 일한 ui-sref-active 지시문 의 사용 은 다음과 같습니다.

<li ui-sref-active="{'active': 'admin'}">
    <a ui-sref="admin.users">Administration Panel</a>
</li>

발견 여기에 표시된 코멘트에서 "tgrant59는 2016 년 5 월 31 일에 댓글을 달았습니다."

angular-ui-router v0.3.1을 사용하고 있습니다.

angular-ui, 특히 경로 확인 : http://angular-ui.github.io/ui-utils/