Vista nidificata angolare del router ui

Question

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!

Answer 1

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:

• Visualizza nomi: relativo vs.Nomi assoluti

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...