AngularJS ui-routerを用いた共通モーダル(BOOTSTRAP)の定義について
BOOTSTRAPのmodalをui-routerで利用するとき、下記のように状態を定義して、$stateProvider#state()に登録しています。
var state = {
name: 'modala',
parent: 'home',
onEnter: function($modal, $state) {
modalInstance = $modal.open({
templateUrl: 'modala.html',
controller: 'modalaCtrl',
controllerAs: 'modal'
});
modalInstance.result['finaly'](function() {
modalInstance = null;
if ($state.$current.name === 'modala') {
$state.go('^');
}
});
},
onExit: function() {
if (modalInstance) {
modalInstance.close();
}
}
};
このとき、modalaは、いろいろな画面から使いたいのですが、parentを指定しているので、モーダルを開いたときの背景がhomeになってしまいます。
parentを指定しない場合、背景は正しく表示されません。
parentを変更したバリエーションを登録すれば実現可能であることはわかりますが、その場合stateの名前もユニークにしなければならないですし、同じモーダルで複数の定義を登録するのは避けたいです。
parentを呼び出し時に指定しようと思いましたが、$stateProvider内のstatesに格納される時点で、各stateはparentをincludeしており、変更後のparentがincludeできませんでした。
解決方法をお持ちの方いらっしゃいますでしょうか?