javascript statechangestart Angular-ui 라우터는 두 개의 상태를 병렬로 활성화합니다.



ui router angular 6 (1)

나는 두 개의 상태를 병렬로 사용해야하는데, 하나는 내 페이지 용이고 다른 하나는 여러 하위 상태가있는 모달 용입니다. 현재 모달 상태를 호출하면 페이지 상태가 변경된 이후에 내 페이지가 삭제됩니다.

모달은 여러 페이지에서 사용되므로 내 페이지의 자식 상태 솔루션을 만들 수 없습니다.

예:

$stateProvider
.state('user', {}) // page
.state('bookshelf', {}) // page
.state('books', {}) // modal
.state('books.read', {}) // sub state of modal

따라서 user 있어 모달을 열면 주정부가 books 바뀌고 내 모달은 콘텐츠를 갖지만 페이지 콘텐츠는 사라지게됩니다.

어떻게 수정해야합니까?


Answer #1

나는 당신이 UI를 사용하여 이것을 할 수있는 방법을 찾고 있다고 믿습니다. 현재는 없습니다. 당신이 묘사하는 것은 모달 (modal) 구성 요소 (이상적으로 지시어로 쓰여질 것입니다)입니다. 이것은 주 상태와 독립적으로 상태를 추적합니다.

그것에 대해 생각하는 방법은 UI입니다. 라우터는 상태 트리를 만들어 작동합니다. 언제든지 나무의 한 지점 만 볼 수 있습니다. 가지 (예 : book , book.open , book.open.checked ) 아래로 깊게 갈 수 있지만 한 번에 두 곳에있을 수는 없습니다.

위의 문제에 대한 또 다른 문제는 두 개의 다른 트리의 상태를 하나의 URL로 직렬화하는 방법입니다. 그것은 할 수 없다고 말하는 것이 아니라 해결하는 것이 어려운 문제입니다.

다음 문제를 점검하십시오.

또한이 repos를 체크 아웃, 그들은 문제를 해결하는 라인을 따라 더있을 수 있습니다.

최대한 멀리 귀하의 즉각적인 문제를 해결, 나는 '쉬운 방법은 상태 제어 내부의 상태를 제어 도랑 것입니다 생각합니다.

대신 어떤 종류의 루트 또는 추상 상태를 추가 한 다음 모달이 열려 있는지 여부를 추적합니다. 그런 다음 여기에 표시된 대로 이벤트를 사용하여 컨트롤러간에 통신 할 수 있습니다 . 참고 : $rootScope 를 청취 할 때 성능에 영향$rootScope 므로 조사해야합니다. 그러나 AppCtrl 은 절대로 파괴되지 않으므로 (누군가 나를 고칠 수 있다고 생각합니다.) AppCtrl 은 절대로 파괴되지 않기 때문에 여기 구현에는 문제가 없습니다.

2015 년 1 월 15 일 수정

이것이 꽤 대중적인 유스 케이스라고 github.com/christopherthielen/ui-router-extras 의 핵심 제공자 중 하나는 github.com/christopherthielen/ui-router-extras 라는 플러그인 / 추가 github.com/christopherthielen/ui-router-extras 유지합니다

또한 "Future States"라고하는 지연로드 유틸리티가 포함되어있어 매우 유용합니다.

즉, 내가 작업 할 시간을 가지기를 바라는 한 가지 기능은 URL (또는 아마도 로컬 저장소) 내에 모든 상태를 유지하고 재사용 가능한 상태의 "구성 요소"를 허용하는 것입니다. 후자는 UI 라우터 로드맵에 있습니다.





angular-ui-router