2013-01-14 14 views
5

Zacząłem grać z AngularJS i mam problem z routingiem do zagnieżdżonych podwidoków.Jak przekierować do subviews z AngularJS?

Moja witryna ma podstawowy układ dwie kolumny tak:

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

linki menu boczne (a, b, c, d, e) będzie dynamicznie generowanych podczas nawigacji na stronie poprzez główną menu (główne 1, główne 2, główne 3).

Tj., Nawigacja do łącza głównego1 spowoduje wysłanie żądania do /main1, które zwróci tablicę połączeń JSON.

Gdy użytkownik kliknie jedno z tych linków, spowoduje wysłanie żądania do /main1/a i załadowanie danych do ramki zawartości.

Sposób Jestem obecnie robi to jest:

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' 
      }) 
    } 
]); 

i to, gdzie mam oblepiony. Moja Main1Ctrl kontroler aktualnie wygląda tak:

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

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

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

Problemy mam jest jak przypisać $scope.content.

Jeśli w adresie URL nie ma podanego identyfikatora, muszę poczekać, aż podmenu wyrenderuje się, zanim będę mógł pobrać pierwszy identyfikator z listy (jeśli nie jest żądana zawartość, domyślnie zostanie wyświetlone pierwsze podmenu pozycja).

Jeśli użytkownik określi ID w adresie URL, chcę, aby żądania /main1 i /main1/:id wystrzeliły równolegle. Użytkownik nie musi czekać na załadowanie menu przed wyświetleniem ich zawartości.

Czy to dobry sposób na obsługę tego typu układu?

+0

możliwe duplikat [angularjs - kompleks zagnieżdżanie podszablonów i szablonów] (http://stackoverflow.com/questions/12863663/angularjs-complex-nesting-of-partials-and-templates) –

Odpowiedz

-1

Wykorzystałem dostawcę trasy i zmienne, aby utworzyć obiekt globalny, do którego można uzyskać dostęp w dowolnym miejscu. Następnie możesz użyć polecenia ng-show/hide, ng-switch lub ui-if, aby pokazać lub ukryć lub zmienić odpowiednie sekcje aplikacji, aby uzyskać wielopoziomowe precyzyjne linki.

sprawdź ten plunker i zbudowałem. Pokaże ci dokładnie, jak to zrobić.

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

Powiązane problemy