Vista nidificata angolare del router ui
-
21-12-2019 - |
Domanda
Sto cercando di inserire una vista nidificata nella mia vista normale, utilizzando ui-router.So che è possibile eseguendo ng-include.Ma voglio risolverlo utilizzando ui-router.
Il mio html è il seguente:
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Project todos</div>
<div class="panel-body">
<div ui-view="todos"></div>
</div>
</div>
</div>
</div>
Quindi nel mio script ho ottenuto uno stato:
.state('project', {
url: '/project/:projectId',
templateUrl: 'views/project/project.html',
controller: 'ProjectCtrl',
views: {
'todos': {
templateUrl: 'views/project/todos.html'
}
}
})
Aggiornamento: non è possibile una cosa del genere?
.state('project', {
url: '/project/:projectId',
templateUrl: 'views/project/project.html',
controller: 'ProjectCtrl',
views: {
'todos@project': {
templateUrl: 'views/project/todos.html'
}
}
})
Qualcuno riesce a trovare un errore di battitura o qualcosa del genere?Ho letto i documenti.Non sono sicuro di cosa ci sia che non va.
Grazie in anticipo!
Soluzione
C'è un funzionamento Plunker, mostrando come possiamo farlo funzionare
Sull'index.htm dobbiamo avere il file <div ui-view="" ></div>
, che è il posto in cui abbiamo inserito project.html.Quindi adattiamo la definizione dello stato, per iniettare anche la vista nidificata, utilizzando ui-view
denominazione assoluta:
.state('project', {
url: '/project/:projectId',
views: {
'' : {
templateUrl: 'views.project.project.html',
controller: 'ProjectCtrl',
},
'todos@project': {
templateUrl: 'views.project.todos.html'
}
}
});
Il nome assoluto todos@project
, inserirà todos.html in project.html.Controlla il Plunker
Vedi:
Una citazione:
...Dietro le quinte, ad ogni vista viene assegnato un nome assoluto che segue uno schema di
viewname@statename
, dove viewname è il nome utilizzato nella direttiva view e state name è il nome assoluto dello stato, ad es.contatto.elemento.Puoi anche scegliere di scrivere i nomi delle viste nella sintassi assoluta...