AngularJS - Visualizzazione multipla in un unico modello

132

Sto creando un'app Web dinamica usando AngularJS. È possibile avere più ng-viewsu un singolo modello?

angularjs ng-view

— Jayram
fonte

2

sembra che ci sia una richiesta pull, ancora con alcuni bug: github.com/angular/angular.js/pull/1198

— Alp

4

Jan Varwig scrive del ruolo delle direttive in Angular. Non è una risposta alla tua domanda, ma per alcuni casi le sue idee potrebbero essere una buona alternativa: jan.varwig.org/archive/angularjs-views-vs-directives/…

— Juha Palomäki

stava attraversando il tutorial angolare e aveva la stessa identica domanda, non lo chiariscono molto, sembra comunque un concetto abbastanza profondo ..

— qwwqwwq

100

Puoi averne solo uno ng-view.

È possibile cambiare il suo contenuto in diversi modi: ng-include, ng-switcho la mappatura diversi controller e modelli attraverso il routeProvider.

— Pasine
fonte

1

controller e template di mapping sostituiranno l'intero elemento ng-view, giusto?

— zx1986,

9

Che dire 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?

— Ray Suelzer,

Si consiglia di utilizzare le viste? Non è meglio definire div con ng-showe ng-hidecontrollare la loro visibilità usando le variabili? Perché a volte mi piacerebbe nascondere / mostrare più componenti

— SomethingSomething

39

UI-Router è un progetto che può aiutare: https://github.com/angular-ui/ui-router Una delle sue caratteristiche è Multiple Named Views

UI-Router ha molte funzionalità e ti consiglio di usarlo se stai lavorando su un'app avanzata.

Controlla la documentazione di più viste nominate qui .

— Morteza Ziyae
fonte

6

Sfortunatamente, come dice il readme di ui-router: Nota: UI-Router è in fase di sviluppo attivo. Pertanto, mentre questa libreria è ben testata, l'API può cambiare. Considera di usarlo nelle applicazioni di produzione solo se ti senti a tuo agio nel seguire un log delle modifiche e aggiornare di conseguenza il tuo utilizzo.

— trainoasi,

1

@trainoasis L'ho usato per più progetti, sembra 'molto' stabile e fino ad ora non ho avuto problemi con la modifica dell'API, infatti non ricordo alcun cambiamento importante nell'API.

— Morteza Ziyae,

19

Credo che tu possa realizzarlo semplicemente avendo single ng-view. Nel modello principale è possibile avere ng-includesezioni per viste secondarie, quindi nel controller principale definire le proprietà del modello per ciascun modello secondario. In modo che si leghino automaticamente alle ng-includesezioni. È come avere piùng-view

È possibile controllare l'esempio riportato nella ng-include documentazione

nell'esempio quando si cambia il modello dall'elenco a discesa, cambia il contenuto. Qui supponiamo che tu abbia uno principale ng-viewe invece di selezionare manualmente il contenuto secondario selezionando il menu a discesa, lo fai come quando viene caricata la vista principale.

— Tekz
fonte

2

In assenza di una soluzione come UI-Router, ng-include è davvero una valida alternativa, come hai spiegato. Ciò che ng-include non può realizzare è la visualizzazione multipla basata su URL (stato), $ route non può eseguire il rendering dinamico di visualizzazioni diverse in base all'URL corrente. Potremmo torcere i bracci di Angular e farlo accadere usando la logica personalizzata nel controller, come nell'esempio nella ng-include documentazione , ma non è un modello di architettura applicativa desiderabile, UI-Router è il giusto tipo di soluzione.

— Yiling

Un vantaggio per il commento di @Yiling. L'uso di ng-include è una soluzione alternativa.

— Farshid Saberi,

13

Utilizzando il ng-viewmodulo normale non è possibile avere più di un modello dinamico.

Tuttavia, questo progetto consente di farlo (cercare ui-router).

— ŁukaszBachman
fonte

3

angular-ui sembra una buona scelta nel (prossimo) futuro ma sembra ancora molto instabile per l'uso in produzione

— David Barreto

8

È possibile avere viste multiple o nidificate. Ma non per ng-view.

Il modulo di routing primario in angolare non supporta più viste. Ma puoi usare l'interfaccia utente. Questo è un modulo di terze parti che puoi ottenere tramite Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . Anche una nuova versione di ngRouter (ngNewRouter) è attualmente in fase di sviluppo. Non è stabile al momento. Quindi ti fornisco un semplice esempio di avvio con ui-router. Usandolo puoi dare un nome alle viste e specificare quali template e controller dovrebbero essere usati per renderle. Usando $ stateProvider è necessario specificare come visualizzare i segnaposto per lo stato specifico.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Per questo esempio è necessario fare riferimento a angularjs e angular-ui.router.

$ bower install angular-ui-router

— Farshid Saberi
fonte

Grazie Farshid questo è fantastico! Dovrebbe essere menzionato nel repository Github

— angular

Non sono sicuro del motivo per cui dovresti farlo. Perché non includere ng nell'intestazione / piè di pagina e visualizzare il contenuto?

— user441521

ng-include funzionerà se i file sono ospitati, ad es. su nodejs. Se si lavora con la directory locale, si genererebbe un errore tra domini.

— Sid

0

Non puoi avere più visualizzazioni. Di seguito è riportato il mio caso d'uso in cui ho risolto il mio requisito. Volevo avere un comportamento a schede nella finestra di dialogo del mio modello. Stavo affrontando il problema come fare clic sulle schede con collegamento ipertestuale che richiamerà i collegamenti del router. Ho risolto questo problema usando il pulsante e il CSS per le schede. Quando l'utente fa clic sulla scheda, in realtà non chiamerà alcun collegamento ipertestuale che invocherà sempre ng-router. Quando l'utente fa clic sulla scheda, chiamerà un metodo, in cui carico in modo dinamico HTML. Di seguito è la funzione al clic della scheda

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Utente $ templateRequest. Nella pagina test_template.html aggiungi il tuo contenuto html. Questo contenuto html sarà associato al tuo controller.

— Aslam anwer
fonte