AngularJS più modelli in una pagina

Ho un indice che serve un menu di intestazione statico, e al di sotto di una vista ng quella basata sulla rotta, seleziona il modello giusto. Ti piace questa ad esempio:AngularJS più modelli in una pagina

<navbar> 
    ... 
</navbar> 
<div ng-view> 
</div>

Tutto è bene finora, quando un percorso specifico è colpito, un modello viene caricato in tale contenitore con il controller associato.

Ora, ho un'altra pagina che viene caricata all'interno di ng-view ed è attivata quando url "/ dashboard" viene colpito. Il problema è che la pagina del dashboard ha un menu della barra laterale che deve contenere anche qualche logica di routing (più o meno). Quando un collegamento è stato cliccato dal menu della barra laterale, devo caricare solo il lato sinistro della pagina (non l'intero contenitore della vista ng).

Ho individuato due soluzioni:

1) Creare una direttiva che memorizza quel menu barra laterale, e iniettare in tutte le pagine che vengono gestiti dal menu laterale ==> routing è comunque gestita da ng- vista.

2) Utilizzare ng-include e hanno una certa logica di routing nella pagina dashboard in questo modo:

<a ng-click="templateType = 1">Template 1</a> 
<a ng-click="templateType = 2">Template 1</a> 

<div ng-if="templateType === 1" ng-include="template1" 
    ng-controller="Template1Controller"></div> 
<div ng-if="templateType === 2" ng-include="template2" 
    ng-controller="Template2Controller"></div>

C'è un altro approccio? Oppure qual è la procedura migliore per gestire sia una barra laterale che gestisce alcuni percorsi, sia un menu statico che gestisce altri percorsi, con la menzione che il menu della barra laterale è disponibile solo su alcuni dei percorsi.

Ho fornito un disegno di pittura, nella speranza che possa spiegare meglio il mio problema.

enter image description here

fonte

2015-06-11 Rus Paul

Perché non si utilizzano angolare-ui-router? – nikhil

È anche possibile selezionare [percorso angolare-segmento] (http://angular-route-segment.com/). –

@nikhil Ho pensato che forse c'era una soluzione in-built senza aggiungere un'altra dipendenza esterna –

È possibile utilizzare UI-Router e dare un colpo a vista nidificate. Ecco uno really good tutorial. Penso che quello che stai cercando di ottenere sia menzionato alla fine del tutorial.

fonte

2015-06-11 11:15:44 Freezystem

Non funziona per me perché richiede molto lavoro per modificare l'app corrente al fine di utilizzare la loro implementazione del routing. –

UI-Router non è diverso da ngRouter. Sta gestendo gli stati contro le rotte, routeParams diventa stateParams e ui-view sostituiscono la direttiva originale di visualizzazione di ng. Quindi puoi fare riferimento ai tuoi percorsi con ui-sref (veramente utile) o semplicemente con href. Ma capisco il tuo punto di vista. Penso che tu possa usare i parametri ngRoute per determinare quale sottoelemento debba essere visualizzato ma potrebbe essere un po 'più complesso. :) – Freezystem

UI-Router sembra davvero bello, ma la mia app ha ~ 150 percorsi diversi distribuiti su molti moduli e richiederebbe la modifica di ognuno di essi per abbinare l'implementazione dell'interfaccia utente. A quel punto preferirei creare una direttiva per una barra laterale e la inserisco ovunque ne abbia bisogno. –

Come tutti gli altri hanno suggerito è necessario andare per il router UI e le viste nidificate. È un ottimo modo per impostare il layout della tua pagina.

È possibile trovare la risposta in Angular UI-Router How to create a "layout" state?

fonte

2015-08-11 02:18:48 Hacker

AngularJS più modelli in una pagina

risposta

Problemi correlati