Konnte nicht zum Kind Zustand in ui Router

Question

Ich habe Zustand wie folgt. Ich kann von app zu app.child1 navigieren. Aber ich kann nicht von app.child1 zu app.child1.child2 navigieren. In der Browserkonsole ist kein Fehler aufgetreten. Beachten Sie, dass ich eine ionische Anwendung entwickle, aber ich denke nicht, dass dies eine ionische Angelegenheit ist.

app.state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: '', 
    controller: '' 
}) 

.state('app.child1', { 
    url: '/app', 
    views: { 
     'menuContent': { 
      templateUrl: '', 
      controller: '' 
     } 
    } 
}) 

.state('app.child1.child2', { 
    url: '/app/child1/child2', 
    views: { 
     'menuContent': { 
      templateUrl: '', 
      controller: '' 
     } 
    } 
}) 

Navigation:

<button ui-sref="app.child1.child2">Change Page</button> 

Answer 1

Es gibt a working plunker

Es gibt einige Probleme mit der Zustandsdefinition, die unten in den Kommentaren abgedeckt:

.state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'app.tpl.thml', 
    controller: 'appCtrl' 
    }) 

    .state('app.child1', { 
    // child1 should have url part /child1 
    // while the /app is inherited from parent 
    //url: '/app', 
    url:'/child1', 
    views: { 
     'menuContent': { 
     templateUrl: 'child1.tpl.html', 
     controller: 'child1Ctrl' 
     } 
    } 
    }) 

    .state('app.child1.child2', { 
    // all parts are inherited from parents 
    // so just /child2 is enough 
    //url: '/app/child1/child2', 
    url: '/child2', 
    views: { 
     // we target named view in a grand parent 
     // not in parent, we need to use the absolute name 
     // 'menuContent': { 
     'menuContent@app': { 
     templateUrl: 'child2.tpl.html', 
     controller: 'child2Ctrl' 
     } 
    } 
    }) 

Diese Links jetzt in Aktion

<a href="#/app/child1"> 
<a href="#/app/child1/child2"> 
<a ui-sref="app.child1"> 
<a ui-sref="app.child1.child2"> 

Überprüfen Sie arbeiten here

Answer 2

Ihre Zustände haben keine Vorlage (templateUrl: ''). Sie sollten eine Vorlage mit der ui-view Direktive haben, in die der Kindstatus injiziert werden kann.