UI-Router füllt TemplateURL und Controller mit verschachtelten abstrakten Zuständen mit verschachtelten Ansichten
-
20-12-2019 - |
Frage
Ich habe damit experimentiert ui-router
und ich hatte eine Art Eigenart.Ich kann eine Ansicht unter einem abstrakten Status nicht füllen.Es scheint, dass die Ansicht nicht gefunden wird, während der Status aktiv ist
Hier ist ein Beispiel :
der staatliche Anbieter:
$stateProvider
.state('search', {
abstract: true,
url: '',
views: {
'@': {
templateUrl: 'app/views/layout.html',
},
'full-page@search': {
templateUrl : 'app/views/search/search.html',
}
}
})
//------------------------------------------------------------
// Search list view
//------------------------------------------------------------
.state('search.list', {
url: '/search/users',
views: {
'content-container@search' : {
templateUrl : 'app/views/search/user.list.html',
controller : 'SearchResults',
}
}
})
//------------------------------------------------------------
// Search view of one users's details
//------------------------------------------------------------
.state('search.user', {
abstract : true,
url: '/search/usr/{userId}',
views: {
'content-container@search' : {
templateUrl: 'app/views/user/user.detail.html',
controller : 'UserController',
},
}
})
//------------------------------------------------------------
// View of the user's details
//------------------------------------------------------------
.state('search.user.view', {
url : '',
views: {
'left-column@search' : {
templateUrl : 'app/views/user/user.detail.view.html',
controller : 'UserEditController',
}
}
})`
HTML:
index.html:
<div>
<div ui-view></div>
</div>
layout.html:
<div>
<div ui-view='full-page'></div>
</div>
suche.html:
<div>
<div ui-view='content-container'></div>
</div>
user.list.html:
<div>
<ul>
<li ng-repeat="user in users">
<a ui-sref='search.user.view({userId : user.userId})'></a>
</li>
</ul>
</div>
user.detail.html:
<div>
<div ng-view="left-column"></div>
<div ng-view='right-column'></div>
</div>
user.detail.view.html:
<div> User information </div>
Der Seitenstatusfluss, den ich erhalten möchte, ist:
1) Erstmaliges Laden von search.list auf der Website (was bis zu sprudelt).
- 1.a:Belastung
layout.html
in die Standard-UI-Ansicht in index.html über die „@“-Ansicht - 1.b:
search.html
wird dann über die „Ganzseiten“-Ansicht in layout.html geladen - 1.c:
user.list.html
wird über geladencontent-container@search
Ansicht im Zustand „search.list“.Das funktioniert gut und gut
2) Klicken Sie auf die Liste, die in erstellt wurde user.list.html
Lädt search.user.view, was sollte?Blase zurück zu search.user,
- 2. eine Ladung user.detail.html im
content-container@search
Ansicht von search.html, dann (das funktioniert) - 2.b einladen user.detail.view.html im
ui-view='left-column'
div von user.detail.html.(Dies funktioniert nicht, die Ansicht „linke Spalte“ bleibt leer.)
Ich dachte ursprünglich, dass dieser Code das gleiche Muster der UI-View-Auffüllung mit abstraktem Zustand zweimal ausführt (einmal für user.list, das andere für user.detail.view), aber es scheint, dass dies nicht der Fall ist.Es scheint, als ob die "left-column"
Die Ansicht wird durchsucht, bevor der Inhaltscontainer gefüllt wird
Ich bin neu im UI-Router und habe daher möglicherweise eine falsche Vorstellung von der Reihenfolge, in der abstrakte Zustände aufgefüllt werden, oder von der beabsichtigten Verwendung abstrakter Zustände.
Lösung
Sie haben es fast geschafft – hier ist ein arbeitender Plunker.Die Änderungen, die ich vorgenommen habe
user.detail.html
nicht der ng-Ansicht Aber ui-view
<div>
//<div ng-view="left-column"></div>
//<div ng-view='right-column'></div>
<div ui-view="left-column"></div>
<div ui-view='right-column'></div>
</div>
Geben Sie „search.user.view“ an
der Teil danach @
Trennzeichen muss der Name von a sein Zustand Halten Sie diese UI-Ansicht - was nicht der Fall ist suchen Aber search.user
.Wie ich weiter zeige right-column
unten - wenn es sich tatsächlich um ein übergeordnetes Element handelt ...wir können es überspringen (wird für uns hinter den Kulissen erledigt)
.state('search.user.view', {
url : '',
views: {
// 'left-column@search' : {
'left-column@search.user' : {
...
},
'right-column@' : {
...
}
}
Sehen Sie sich das Arbeitsbeispiel an Hier