중첩 탭을 만들어야합니다.angularjs를 사용하는 중첩 탭
페이지에는 여러 개의 개인 ID 탭이 외부 탭으로 있고 각 탭을 클릭하면 집, 사무실 등의 내부 탭이 열리 며 내부 탭 - 홈을 클릭하면 탭 내용이 표시됩니다.
Outertab : 사람 1하여 Person2
Innertab : - http://angular-ui.github.io/bootstrap/, 콘텐츠를 외부 탭을 만든 홈 오피스
사이트를 다스 려. 두 개의 별도 탭셋을 만들었지 만 두 탭셋 사이에 링크를 제공 할 수 없습니다.
누군가 중첩 탭에 대한 지시어 작성 방법을 알려 줄 수 있습니까? 참조 링크가 있습니까?
나는 AngularUI Router이 당신이 찾고있는 것입니다. UI-Router의 대다수는 상태가 중첩 될 수있는 능력이 있습니다 &. 제가 제공 한 링크를 따라 섹션 Nested States & Views을보십시오.
이 Plunker example은 찾고있는 유사한 기능을 얻기 위해 AngularUI Router을 통합합니다.
중첩 된 뷰 구성이 레이아웃은 정확히 무엇 AngularUI Router입니다 위해 사용된다 [편집] :
그래서 TabsTemplate 동적 탭의 첫 번째 레벨을 렌더링 (모든 번호).
TabTemplate은 동적 콘텐츠가없는 템플릿 일 수 있으며 집과 사무실 탭은 항상 있습니다.
OfficeTemplate 및 HomeTemplate은 다시 현재 사람의 선택에 따라 동적으로 채워지는 템플릿입니다.
angular bootstrap tabset directive의 작성 방법을 참조하십시오.
탭 코드를 읽으면 지시어 작동 방식을 이해하는 데 도움이되었습니다. 이제부터는 많은 구성 요소를 기초부터 구성 할 수 있습니다.
나는 더 단순한 tabset 지시어 버전을 만들었지 만, 내용을 렌더링하지는 않는다. 단지 tabheading 요소 일 뿐이다. 따라서 선택한 콜백 탭을 통해 콘텐츠 내부 내용을 결정할 수 있습니다. 중첩 탭의 경우 다른 탭 세트 지시문을 넣으면됩니다.
고마워. 부트 스트랩 ui 탭셋과 탭을 사용하여 플 렁커 (Plunker) - http://plnkr.co/edit/qQD9RY0Qa1XO0RlJxJou?p=preview에서 요구 사항의 정적 페이지를 빌드하십시오. 부모 탭 안쪽 탭을 만들고 부모 탭을 닫을 때 부모 탭과 내부 탭을 모두 닫으려면 사용자 정의 지시문을 작성해야합니다. – user2495903
참조 사이트 주셔서 감사합니다. 내 단일 페이지 응용 프로그램 요구 사항에서 외부 탭은 동적인데, 표시 할 Person ID의 수는 이전 페이지의 사용자 클릭을 기준으로 변경됩니다. 그리고 내부 탭은 정적 인 Home이고 Office는 항상 각 Person에 대해 표시됩니다 id outer tab.이 경우 참조 사이트에서 언급 한 것처럼 별도의 html 페이지를 만들 수 있습니까? ui-route에 대한 제 이해가 정확하지 않으면 저를 시정하십시오. – user2495903
나는 너를 100 % 이해할 수 있을지 확신하지 못한다. 업데이트 된 답변을 살펴보십시오. – PrimosK
예. 이게 내가 정확히 필요한거야. 나는 다른 페이지로보기 및 라우팅을 사용하여 단일 페이지 응용 프로그램을 구축 중입니다. ui-router와 ng보기를 함께 사용할 수 있습니까? – user2495903