126
Sto costruendo un'applicazione web dinamica utilizzando AngularJS. È possibile avere più ng-view su un singolo modello?AngularJS - Visualizzazione ng multiple in modello singolo
A
risposta
92
È possibile avere solo uno ng-view.
È possibile modificare il contenuto in diversi modi: ng-include, ng-switch o mappare diversi controller e modelli attraverso il routeProvider.
+1
i controller di mappatura ei template sostituiranno l'intero elemento di ng-view, giusto? – zx1986
+9
Che ne dici di cambiare dinamicamente il contenuto di un widget? Non vorresti creare una vista per il widget e un controller per il widget e un modello per il widget? –
+0
Si consiglia di utilizzare le viste? Non è meglio definire i div con 'ng-show' e' ng-hide' e controllarne la visibilità usando le variabili? Perché a volte mi piacerebbe nascondere/mostrare più componenti – SomethingSomething
13
Utilizzando il modulo regolare ng-view non è possibile avere più di un modello dinamico.
Tuttavia, this project consente di farlo (cercare ui-router).
+3
angolare-ui sembra una buona scelta nel (vicino) futuro ma sembra ancora molto instabile per l'uso di produzione –
38
UI-Router è un progetto che può aiutare: https://github.com/angular-ui/ui-router Una delle sue caratteristiche è più Viste con nome
UI-Router ha molte caratteristiche e vi consiglio di utilizzarlo se si sta lavorando un'app avanzata.
Controllare la documentazione di più Viste con nome here.
+6
Sfortunatamente come dice il software del router: Nota: UI-Router è in fase di sviluppo attivo. Di conseguenza, sebbene questa libreria sia ben testata, l'API potrebbe cambiare. Potresti utilizzarlo nelle applicazioni di produzione solo se sei a tuo agio seguendo un log delle modifiche e aggiornando di conseguenza il tuo utilizzo. – trainoasis
+1
@trainoasis Usato per più progetti, sembra molto "stabile" e fino ad ora non avevo alcun problema a cambiare API, infatti non ricordo alcun cambiamento importante nell'API. –
15
Credo che si possa realizzare semplicemente con il singolo ng-view. Nel modello principale è possibile avere sezioni ng-include per viste secondarie, quindi nel controller principale definire le proprietà del modello per ciascun modello secondario. In questo modo si collegheranno automaticamente alle sezioni ng-include. Questo è lo stesso di avere più ng-view
È possibile controllare l'esempio dato in ng-includedocumentation
nell'esempio quando si cambia il modello dal menu a tendina cambia il contenuto. Qui si presuppone di avere uno ng-view principale e invece di selezionare manualmente il contenuto secondario selezionando a discesa, lo si fa come quando viene caricata la vista principale.
+2
In assenza di soluzioni come UI-Router, ng-include è davvero un'alternativa valida, come hai spiegato. Ciò che ng-include non può realizzare è una vista multipla basata su URL (stato), $ route non può rendere dinamicamente viste differenti basate sull'URL corrente. Potremmo torcere le braccia di Angular e farlo accadere usando la logica personalizzata nel controller, come nell'esempio in 'ng-include' [documentation] (https://docs.angularjs.org/api/ng/directive/ngInclude) , ma non è un modello di architettura applicativo desiderabile, l'UI-Router è il giusto tipo di soluzione. – Yiling
+0
Un plus per il commento @Yiling. L'utilizzo di ng-include è una soluzione alternativa. –
7
È possibile avere viste multiple o nidificate. Ma non da ng-view.
Il modulo di instradamento primario in angolare non supporta più viste. Ma puoi usare ui-router. Questo è un modulo di terze parti che puoi ottenere tramite Github, angular-ui/ui-router, https://github.com/angular-ui/ui-router. Al momento è in fase di sviluppo anche una nuova versione di ngRouter (ngNewRouter). Al momento non è stabile. Quindi ti fornisco un semplice esempio di avvio con ui-router. Usandolo è possibile assegnare un nome alle viste e specificare quali modelli e controller devono essere utilizzati per il rendering. Usando $ stateProvider è necessario specificare come visualizzare i segnaposto per renderizzare lo stato specifico.
Per questo esempio è necessario fare riferimento a angularjs e angular-ui.router.
$ bower install angular-ui-router
+0
Grazie Farshid questo è fantastico! Dovrebbe essere menzionato nel repository Github angolare-ui/ui-router https://github.com/angular-ui/ui-router dove ho ottenuto il modulo – totallytotallyamazing
+0
Non sono sicuro del motivo per cui avresti bisogno di farlo. Perché non ng-include l'header/footer e il ng-view del contenuto? – user441521
sembra che ci sia una richiesta di pull, ancora con alcuni bug: https://github.com/angular/angular.js/pull/1198 – Alp
gen Varwig scrive sul ruolo delle direttive in angolare. Non è una risposta alla tua domanda, ma per alcuni casi le sue idee potrebbero essere una buona alternativa: http: //jan.varwig.org/archive/angularjs-views-vs-directives/comment-page-1 –
stava passando attraverso il tutorial angolare e aveva questa stessa identica domanda, non lo rendono molto chiaro, sembra un concetto piuttosto profondo però .. – qwwqwwq