-1
私はui.router 1. *とコンポーネントルーティングを使用するように私のサイトをリファクタリングしています。ui.routerを使って動的なメニューとコンテンツを作成する方法は？
私は以下の解決策を考え出しました。しかし、これが正しいアプローチであるかどうかを知りたいですか？私はマスターコンポーネントに$トランジションを注入することについて本当に幸せではありませんが、どうやってダイナミックメニューを実現できるかわかりません。
私はapp.runでこれらのフックを定義することを考えましたが、アクセスする方法が不明だったり、master.menuComponentsを取得して変更したりするのがよい方法であったとしても。
このようにダウンフォールがありますか？
<!docttype html>
<html>
<head>
<!--script stuff-->
</head>
<ui-view></ui-view>
</html>
app.component('master', {
bindings: {menuComponents: '<'},
template: '<body>' +
'<nav class="navbar navbar-inverse navbar-fixed-top" role="naviation">' +
'<div class="navbar-header">' +
'<a class="navbar-brand" ui-sref="#">My Dynamic Site</a>' +
'<ul class="nav navbar-nav">' +
'<li ng-repeat="menu in $ctrl.menuComponents">' +
'<a ui-sref="{{menu.state}}" ui-sref-active="active">{{menu.name}}</a>' +
'</li>' +
'</ul>' +
'</div>' +
'<ul class="nav navbar-nav">' +
'</ul>' +
'<ul class="nav navbar-nav pull-right">' +
'<li><a ui-sref="master.logout"><strong>logout</strong></a></li>' +
'</ul>' +
'</nav>' +
'<ui-view></ui-view>' +
'</body>',
controller: function(_, $transitions){
var vm = this;
$transitions.onExit({from: 'master.login'}, function(trans){
//get new menu's and states based on credentials
var $stateRegistry = trans.router.stateRegistry;
$stateRegistry.register({name:'master.dynamic1', url:'/dynamic1', template: '<h1>I Am Dynamic</h1>'});
vm.menuComponents.push({name:'dynamic1', state: 'master.dynamic1'});
});
$transitions.onEnter({to: 'master.logout'}, function(trans){
var $stateRegistry = trans.router.stateRegistry;
$stateRegistry.deregister('master.dynamic1');
_.remove(vm.menuComponents, {name:'dynamic1'});
});
}
});
$stateProvider
.state('master', {
url: '/master',
abstract: true,
component: 'master',
resolve: {
menuComponents : function(){ //would probably inject a menuService to return this
return [{name:'login', state: 'master.login'}];
}
}
}).state('master.login', {
url: '/login',
component: 'login'
}).state('master.logout', {
url: '/logout',
component: 'logout'
});
$urlRouterProvider.when('/', '/master/login')
.otherwise('/master/login');
index.htmlには先に行って、私はui.routerにサービスを介して読み込むことができ、メニューの文書とのMongoDBを設定します。コンポーネントで状態を追加できないことを除いて、すべてがうまくいくようです。私はこれを動作させるために怠惰な負荷をかけなければならないでしょうか？