Angular-ui 라우터는 2개의 상태를 동시에 활성화 합니다.
두 개의 상태를 동시에 사용해야 합니다. 하나는 페이지용이고 다른 하나는 여러 개의 하위 상태가 있는 모달용입니다.현재 모달 상태를 호출하면 페이지 상태가 변경되어 내 페이지가 지워집니다.
my page의 child state child를 만드는 것은 modal이 여러 페이지에 사용되기 때문에 해결책이 되지 않습니다.
예:
$stateProvider
.state('user', {}) // page
.state('bookshelf', {}) // page
.state('books', {}) // modal
.state('books.read', {}) // sub state of modal
그래서 만약에 내가 하면user
내 모달(modal)을 열면 상태가 바뀌어books
그러면 내 모달에 콘텐츠가 있지만 페이지 내용은 지워집니다.
어떻게 고치죠?
UI에서는 이 방법이 불가능하다고 생각합니다.현재 라우터여기서 설명하는 것은 기본 상태와 독립적으로 상태를 추적하는 모달 구성요소(지시문으로 작성되는 것이 이상적임)입니다.
그 UI를 생각할 수 있습니다.라우터는 상태 트리를 작성함으로써 동작합니다.언제든지 트리의 한 가지만 볼 수 있습니다.브런치를 더 깊이 파고들 수 있습니다(즉,book
,book.open
,book.open.checked
단, 동시에 두 장소에 있을 수 없습니다.
위의 문제의 또 다른 문제는 어떻게 두 개의 다른 트리의 상태를 하나의 URL로 시리얼화하느냐는 것입니다.불가능하다는 게 아니라 해결하기 어려운 문제일 뿐이에요.
다음 문제를 확인합니다.
- https://github.com/angular-ui/ui-router/issues/119
- https://github.com/angular-ui/ui-router/issues/384
- https://github.com/angular-ui/ui-router/issues/475
또한 이러한 저장소를 확인하면 문제를 해결하는 데 더 많은 도움이 될 수 있습니다.
- https://github.com/afterglowtech/angular-detour
- https://github.com/stu-salsbury/angular-couch-potato
당면한 문제를 해결하는 한, 가장 쉬운 방법은 상태 구성 내의 모달 상태를 제어하는 것을 포기하는 것이라고 생각합니다.
대신 루트 또는 추상 상태를 추가하고 모달(modal)이 열려 있는지 추적합니다.다음으로 다음과 같이 이벤트를 사용하여 컨트롤러 간에 통신할 수 있습니다.주의: 청취에는 퍼포먼스에 영향이 있습니다.$rootScope
꼭 조사해 주세요.그러나 (누군가 저를 자유롭게 수정해 주세요) 이 구현에는 이러한 문제가 없습니다.AppCtrl
절대 파괴되지 않습니다.
2015년 1월 15일 편집
이는 매우 일반적인 사용 사례로 UI 라우터의 핵심 요소 중 하나가 UI 라우터 엑스트라라는 플러그인/추가 기능을 유지하고 있습니다.
또한 "Future States"라고 불리는 게으른 부하를 위한 유틸리티도 포함되어 있어 매우 유용합니다.
즉, 작업 시간을 벌고 싶은 기능 중 하나는 URL(또는 로컬 스토리지) 내의 모든 상태를 유지하고 "컴포넌트"를 재사용할 수 있도록 하는 것입니다.후자는 UI 라우터 로드맵에도 있습니다.
언급URL : https://stackoverflow.com/questions/22313492/angular-ui-router-get-two-states-active-in-parallel
'programing' 카테고리의 다른 글
Word press에서 태그 링크를 재생하는 방법 (0) | 2023.04.03 |
---|---|
경고 해결 방법: 리액트가 DOM 요소의 X 프로펠을 인식하지 않음 (0) | 2023.04.03 |
TypeScript 프로젝트에서 기존 C# 클래스 정의를 재사용하는 방법 (0) | 2023.04.03 |
React.js: contentEditable의 onChange 이벤트 (0) | 2023.04.03 |
배열에 다음이 포함된 경우 각도 표현식 (0) | 2023.04.03 |