2013-01-14 2 views
5

AngularJS로 놀기 시작했고 중첩 된 하위 뷰로 라우팅하는 데 문제가 있습니다. 메인 통해 페이지를 탐색 할 때 동적으로 생성 될AngularJS를 사용하여 하위 뷰로 연결하는 방법은 무엇입니까?

[Main 1] [Main 2] [Main 3] 
-------------------------------------- 
A | Content for A goes into this frame. 
B | 
C | 
D | 
E | 

사이드 메뉴 링크 (A, B, C, D, E)

내 사이트 기본 개의 열 레이아웃과 같이 보유 메뉴 (메인 1, 메인 2, 메인 3).

즉, main1 링크로 이동하면 /main1에 요청하여 링크의 JSON 배열을 반환합니다.

사용자가 해당 링크 중 하나를 클릭하면 /main1/a으로 요청하고 콘텐츠 프레임에 데이터를로드합니다.

나는 현재이 일을 해요 방법은 다음과 같습니다

index.html을 :

<body> 
    <a href="/main1">Main 1</a> 

    <div ng-view></div> 
</body> 

app.js :

angular.module('test', [ 
    'test.controllers' 
]) 

.config([ 
    '$routeProvider', 

    function($routeProvider) 
    { 
     $routeProvider 
      .when('/main1', { 
       templateUrl: '/partials/main1.html', 
       controller: 'Main1Ctrl' 
      }) 
      .when('/main1/:id', { 
       templateUrl: '/partials/main1.html', 
       controller: 'Main1Ctrl' 
      }) 
    } 
]); 

내가 얻을 수있는 곳이다 붙어있어.

angular.module('test.controllers', []) 

.controller('Main1Ctrl', [ 
    '$scope', 
    '$routeParams', 
    'Data', 

    function($scope, $routeParams, Data) 
    { 
     $scope.submenu = Data.query(); 
    } 
]); 

나는 데 문제점이되는 방법 $scope.content을 할당 :처럼 내 Main1Ctrl 컨트롤러는 현재 보인다.

URL에 ID가 지정되지 않은 경우 목록에서 첫 번째 ID를 가져올 때까지 하위 메뉴가 렌더링 될 때까지 기다려야합니다 (내용이 요청되지 않으면 첫 번째 하위 메뉴가 기본으로 설정 됨). 목).

사용자가 URL에 ID를 지정하면 병렬로 /main1/main1/:id 개의 요청을 실행하고 싶습니다. 사용자는 콘텐츠를보기 전에 메뉴가로드 될 때까지 기다릴 필요가 없습니다.

이 유형의 레이아웃을 처리하는 좋은 방법일까요?

+0

가능 중복 [AngularJS와 - 파셜 템플릿의 복잡한 중첩 (http://stackoverflow.com/questions/12863663/angularjs-complex-nesting-of-partials-and-templates) –

답변

-1

저는 경로 제공 업체와 변수를 활용하여 어디서나 액세스 할 수있는 전역 개체를 만들었습니다. 그런 다음 ng-show/hide, ng-switch 또는 ui-if를 사용하여 응용 프로그램의 해당 섹션을 표시하거나 숨기거나 전환하여 여러 수준의 깊은 연결을 얻을 수 있습니다.

체크 아웃이 plunker 내가 체크 아웃. 정확히 어떻게하는지 보여 줄 것입니다.

http://plnkr.co/edit/beAm3WRomMafKzx1SoSZ?p=preview

관련 문제