uiルータの子状態にナビゲートできません

Question

私は以下のような状態があります。 appからapp.child1に移動できます。しかし、app.child1からapp.child1.child2にナビゲートすることはできません。ブラウザコンソールにエラーはありません。私はイオン性のアプリケーションを開発しているが、これはイオン性の問題だとは思わないことに注意してください。

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: '' 
     } 
    } 
}) 

ナビゲーション：

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

Answer 1

a working plunker

以下のコメントで覆われている状態の定義、といくつかの問題がありますがあります。今

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

アクションでそれを確認してください

.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' 
     } 
    } 
    }) 

は、これらのリンクは動作しますが、 here

Answer 2

あなたの状態は、テンプレート（templateUrl: ''）を持っていません。子ステートを注入できるui-viewディレクティブのテンプレートが必要です。