AngularJs: Verschachtelter Status wird nicht angezeigt

Question

Ich versuche, geschachtelte Zustände in meinem Projekt zu implementieren, aber sie funktionieren nicht wie erwartet.

Obwohl View-Vorlage und Js-Aufrufe gemacht und laden auf der Rückseite, aber der Bildschirm ändert sich nicht mit anderen Worten verschachtelten Bildschirm nicht angezeigt wird.

http: // {domain}/#/app/store/users/1/new

Im Folgenden finden Sie Codeausschnitt meiner Arbeit

.state('app.store.users', { 
    url: '/users/:storeid', 
    params: { storeid: '1' }, 
    templateUrl: 'store/users', 
    controller: 'UsersController', 
    require: ['users', 'datatables'], 
    data: { 
    displayName: 'Store Users' 
    } 
}) 
.state('app.store.users.new', { 
    url: '/new', 
    templateUrl: 'store/newuser', 
    controller: 'NewUserController', 
    require: ['newuser'], 
    data: { 
    displayName: 'New User' 
    } 
}) 
; 

http: // {domain}/#/app/store/users/1/new

oben url Unter Berücksichtigung Benutzer nicht NewUser anzeigt.

danke im voraus !!

Answer 1

Sie müssen ui-view in der übergeordneten Ansicht einschließen, damit es weiß, dass eine untergeordnete Ansicht daran angehängt ist.

Grundsätzlich sind

<div ui-view></div> 

ODER

<ui-view></ui-view> 

im Teil von app.store.users Zustand, an dem Ort, in dem Sie den HTML-Code für Kinder Zustand (App laden möchten .store.users.new)

So funktioniert der UI-Router.

prüfen diese Plunker es besser zu verstehen: http://plnkr.co/edit/u18KQc?p=preview

EDIT:

Wenn man sie als zwei separate Bildschirme wollen sie sollten nicht in einer Eltern-Kind-Beziehung sein. Sie sollten zwei separate Zustände sein, in denen die URL noch verschachtelt sein kann. Ändern Sie einfach Ihre Statusnamen, um unabhängig voneinander zu sein.

So etwas wie dies funktioniert:

.state('app.store.users', { 
    url: '/users/:storeid', 
    params: { storeid: '1' }, 
    templateUrl: 'store/users', 
    controller: 'UsersController', 
    require: ['users', 'datatables'], 
    data: { 
    displayName: 'Store Users' 
    } 
}) 
.state('app.store.newusers', { 
    url: '/users/:storeid/new', 
    params: { storeid: '1' }, //you still have to pass params to it 
    templateUrl: 'store/newuser', 
    controller: 'NewUserController', 
    require: ['newuser'], 
    data: { 
    displayName: 'New User' 
    } 
});