2013-06-24 14 views
11

Ho 2 file di layout. layout-1 layout-2Come caricare un layout diverso in angularjs

Il percorso /one è il punto di partenza, che carica il Layout-1, ma ora se clicco su un link /two mi viene il file, ma con Layout-1, invece che voglio, se ho colpito /two, Layout-2 deve essere caricato.

Se aggiorno la pagina, ottengo la cosa giusta coz quella volta che ho colpito direttamente il server. Quindi c'è un modo da angolare per specificare quale file di layout caricare dal server.

Grazie.

+1

utilizzare ng-view con $ routeprovider per configurare le rotte grappolo di esempi sono disponibili online –

+2

non sono riuscito a trovare alcun esempio in cui in I possono avere modelli resi all'interno di diversi file LAYOUT. –

risposta

1

Infine, ho avuto il problema risolto utilizzando UI-Router

Grazie per l'aiuto :)

+8

Puoi spiegarci un po 'di più? Sto affrontando lo stesso identico problema al momento. Ho index.html e index-dashboard.html con ogni lotto di template all'interno e non sono in grado di cambiare il layout –

+0

sì, sarebbe bello poter pubblicare un codice di esempio come hai implementato il router UI che carica un layout diverso. –

+1

Hey Aamir ti dispiacerebbe condividere cosa ha risolto il problema? Accettare la propria risposta senza nemmeno rispondere non è davvero utile. – wegginho

0

Se si distingue per il client di routing lato quindi si dovrebbe utilizzare $routeProvider per scrivere un percorso per questo

var app = angular.module('app', []); 

app.config(function($routeProvider){ 
    $routeProvider 
    .when('/one', {templateUrl: 'tmpl1.html'}) 
    .when('/two', {templateUrl: 'tmpl2.html'}) 
    .otherwise({redirectTo: '/one'}); 
}); 

Essa vi permetterà di definire template e controller separato per un altro url/azione

Here I fatto un esempio funzionante di come funziona.

Se si tratta di serverside instradamento quindi leggere manual e usare in questo modo:

match 'two' => 'controller#action' 
+1

questo è esattamente quello che sto facendo. Ma tmpl1.html tmpl2.html sono i partial. Quello che voglio è caricare questi partial in un layout diverso ... puoi aiutarmi in questo ... grazie –

+0

Cerca nell'esempio plnkr. Caricherà i modelli corrispondenti (è uguale a partial?) Nel div contrassegnato con 'ng-view'. Il layout principale è in index.html. Secondo questo esempio non sono sicuro di cosa vuoi cambiare? – SET

+0

Vuoi cambiare index.html piuttosto che tmpl * .thml file? – SET

1

Caricamento in corso nuovo modello di layout significa caricare nuovo html incorporato con nuovi file javascript e css. Questo equivale al reindirizzamento della pagina a una nuova posizione. È possibile utilizzare $window.location.href="new/layout/template". Leggi angularjs developer guide per maggiori informazioni.

Problemi correlati