Eckige UI-Router-verschachtelte Ansicht

Question

Ich versuche, mit dem ui-Router eine verschachtelte Ansicht in meine normale Ansicht einzufügen.Ich weiß, dass es mit ng-include möglich ist.Aber ich möchte es mit ui-Router lösen.

Mein HTML ist wie folgt:

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

Dann habe ich in meinem Skript einen Zustand bekommen:

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

Update - ist so etwas nicht möglich?

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

Kann jemand einen Tippfehler finden oder so?Ich habe die Dokumente gelesen.Ich bin mir nicht sicher, was los ist.

Danke im Voraus!

Answer 1

Es gibt eine funktionierende plunker, zeigen, wie wir es zum Laufen bringen können

Auf dem Index.htm müssen wir die haben <div ui-view="" ></div>, das ist der Ort, an dem wir das Projekt injizieren.HTML.Dann passen wir die Statusdefinition an, um auch verschachtelte Ansichten einzufügen - mit ui-view absolute Benennung:

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

Der absolute Name todos@project, wird die Aufgaben injizieren.html in das Projekt.HTML.Überprüfen Sie die plunker

Sehen Sie die:

• Namen anzeigen - relativ vs.Absolute Namen

Ein Zitat:

...Hinter den Kulissen wird jeder Ansicht ein absoluter Name zugewiesen, der einem Schema von folgt viewname@statename, wobei viewname der Name ist, der in der View-Direktive verwendet wird, und Statusname der absolute Name des Status ist, z.Kontakt.Element.Sie können Ihre Ansichtsnamen auch in der absoluten Syntax schreiben...