UI-Router füllt TemplateURL und Controller mit verschachtelten abstrakten Zuständen mit verschachtelten Ansichten

Question

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

Answer 1

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