2016-06-30 5 views
1

을 사라질 Plunker https://plnkr.co/edit/CrLukiNbYRL8AreLS2rt?p=previewAngularJS와 UI 라우터 아이 뷰 여기

Pls는이다하는 클릭 한 후, B 및 C는 나타나는, 다시을 클릭. C가 사라집니다.

가 나는 노선이 있습니다

A - 초록, 그것은이 두 명명 된 뷰 A-1, A-2와 주 메뉴. B는 - B 메뉴에 관련된 콘텐츠이며 경로 A의 메인 메뉴로 UI-SREF있다

보기 @ A-2에 앉는 - 뷰 C @ A-1에 앉는 하위 메뉴 인 B 경로. 나는 메인 메뉴 요소를 클릭 할 때

if($state.is('B')) { 
    $state.go('C', {defaultContentId}); 
} 

그래서, 그것은 기본 콘텐츠와 B를 엽니 다 :

B 노선 컨트롤러는 논리를 가지고있다. 이것은 괜찮습니다. 문제 없습니다. 그런 다음 기본 메뉴에서 같은 요소를 클릭하면 내 기본 하위 메뉴가 선택되고 콘텐츠는 비어 있습니다. B 컨트롤러의 모든 중단 점이 실행되지 않습니다.

해결 과정 I 탐색의 2 층이

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
    if(!$state.is(toState.name, toParams) && $state.includes(toState.name, toParams)){ 
     event.preventDefault(); 
     console.warn('Same state prevented'); 
    } 
}); 

(응답하지), 그래서 부모가 클릭 한 경우 확인하고 클릭을 방지 할 수 있습니다. 솔루션 아니, 그냥 비린내 패치 ...

그래서. 나의 예에서는 뿌리가 있지만 실제 예를 들어 ... A1, A2, A3 e.t.c를 가정 해 봅시다. 이제이 해결 방법을 사용하면 A1을 클릭 할 수 있지만 B가로드되고 A1을 클릭하면 차단됩니다. 여전히 A1 → B 층에서 A2와 A3로 자유롭게 이동할 수 있습니다.

+0

이상한 행동 : 당신은 실제로 당신이 상태를 탐색 할 때 다시 실행하려면

, 당신은 ui-sref-opts 속성으로 전체 다시로드를 지정할 수 있습니다. 나는 'ui-sref tags'에 대한 클릭으로 상태에 대한 콘솔 로그를 추가하여 시도해 보았고'B : '와 관련된 모든 클릭에서'A'와'id : x'를 처음 클릭 할 때'Id : 3'을 봅니다. '. 그러나 당신이 지정한 경우에 나는'Id '를 상태 매개 변수로 보지 않습니다. 왜 이런 일이 일어나고 있는지 모르지만 단서가 될 수 있습니다. 나는 계속 지켜 볼 것이다. – M22an

+0

글쎄, 내 티켓은 다음과 같습니다 https://github.com/angular-ui/ui-router/issues/2846 – Kindzoku

답변

2

A.B.C가 A.B.의 하위 상태이므로 A.B 용 컨트롤러가 다시 실행되지 않습니다. 따라서 A.B.C에서 A.B로가는 것은 상태 트리의 두 번째 레벨을 변경하지 않습니다.

이것은 ui-router에 대한 멋진 점입니다. 상태가로드 된 상태로 유지되며 ui의 특정 부분 만 다시로드 할 수 있습니다. 실제로

<menuItem ui-sref="A.B" ui-sref-opts="{reload: true}" class="btn btn--main">A - Click-me</menuItem> 
+0

글쎄, 그것은 이상한 행동입니다. 왜냐하면 A가 1 lvl보다 높기 때문입니다. 1 lvl 낮춘다. – Kindzoku

+0

내 말은 - 나는 의도적으로 A로 가고, 나는 B를 더 이상 필요로하지 않는다. – Kindzoku

+0

당신은 A에 가지 않을 것입니다, 당신이 클릭하는 링크 (템플릿 A에서)는 B – frankies

관련 문제