2016-10-24 10 views
0

角型アプリの状態に基づいてタイトルを設定したいと思います。それはうまく動作しますが、子の状態にタイトルが定義されていない場合は、親のtitleプロパティにフォールバックしたいと思います。子から親ステートにアクセスするUI-router

これは私がこれまで持っているものです:私のアプリの実行ブロックで

:コード検査中に

... 
$rootScope.$on('$stateChangeSuccess', function (event, current, previous) { 

    if (current.hasOwnProperty('title')) { 
    $rootScope.title = current.title; 
    } 
}); 
... 

私のモジュールのルートで

.state('main.parent', { 
    url: '/parent', 
    controller: 'ParentController', 
    controllerAs: 'vm', 
    templateUrl: 'app/parent.html', 
    title: 'Parent', 
}) 
.state('main.parent.child', { 
    url: '/child', 
    controller: 'ChildController', 
    controllerAs: 'vm', 
    templateUrl: 'app/child.html' 
}) 

、私は$stateChangeSuccessが予想通り2回トリガーされていることが判明しました。最初は親に対して、次にth子供。子が呼び出されたときに私はcurrent.parentにアクセスしようとしましたが、そのようなプロパティはありません。それにアクセスする方法はありますか?

UPDATE

私はこれらの質問を見た: get parent state from ui-router $stateChangeStartget parent state from ui-router $stateChangeStart をしかし、それらのどれも後者の状態分割ハックを除いて(この問題に対する明確な答えを持っていたが、私はむしろそれを避けたいです)。

+1

$状態でチェック$ current.parent! –

答えて

0

だから最終的に私は、次の解決策を考え出しました - カスタムプロパティで状態定義を汚染しないように)。

.state('main.parent', { 
    url: '/parent', 
    controller: 'ParentController', 
    controllerAs: 'vm', 
    templateUrl: 'app/parent.html', 
    data: { 
    title: 'Parent' 
    } 
}) 
.state('main.parent.child', { 
    url: '/child', 
    controller: 'ChildController', 
    controllerAs: 'vm', 
    templateUrl: 'app/child.html' 
}) 

そして、次のように私はrunblockを変更:

... 
$rootScope.$on('$stateChangeSuccess', function (event, toState, fromState) { 
    var current = $state.$current; 
    if (current.data.hasOwnProperty('title')) { 
    $rootScope.title = current.data.title; 
    } else if(current.parent && current.parent.data.hasOwnProperty('title')) { 
    $rootScope.title = current.parent.data.title; 
    } else { 
    $rootScope.title = null; 
    } 
}); 
... 

これは、タイトルにフォールバックする素敵なことだ複数のネストされた状態の場合のように、まだ完璧なソリューションではありません一番若い祖先のタイトルですが、それは今のところそれを行います。

1

どちらの方法もハックです。 $ state(および$ stateParams for 2nd variant)プロバイダをコントローラにインポートすることを忘れないでください。あなたが使用することができ :

$state.$current.parent.self.title 

または

var tree = current.name.split('.'); 
tree.splice(tree.length-1, 1); 
var parent = tree.join('.'); 
$state.get(parent, $stateParams); 
1

あなただけの子状態に定義されたタイトルがない場合は戻って親のタイトルプロパティに落下するtitleプロパティを必要とするようだ、私は提案しますこのリポジトリを使用する:angular-ui-router-title。理にかなっている$stateからあなたが親のカスタムプロパティ、dataに保存されているものだけを(アクセスできないので、私は、国家のdataオブジェクト内titleを保存

関連する問題