16838


BOOTSTRAPのmodalをui-routerで利用するとき、下記のように状態を定義して、$stateProvider#state()に登録しています。

[code]

    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();
            }
        }
    };
    
[/code]

このとき、modalaは、いろいろな画面から使いたいのですが、parentを指定しているので、モーダルを開いたときの背景がhomeになってしまいます。  
parentを指定しない場合、背景は正しく表示されません。

parentを変更したバリエーションを登録すれば実現可能であることはわかりますが、その場合stateの名前もユニークにしなければならないですし、同じモーダルで複数の定義を登録するのは避けたいです。

parentを呼び出し時に指定しようと思いましたが、$stateProvider内のstatesに格納される時点で、各stateはparentをincludeしており、変更後のparentがincludeできませんでした。

解決方法をお持ちの方いらっしゃいますでしょうか？


CC BY-SA 3.0
2015-08-19T01:51:47.043
14604
2015-09-22T00:50:17.467
9790
question
javascript angularjs bootstrap ui-router
AngularJS ui-routerを用いた共通モーダル(BOOTSTRAP)の定義について


parentを消してnameを'home.modala'と子ステートにすればstate登録時にname変更できるのではないでしょうか。呼び出すときはどの親でも$state.go('.modala');で行けると思います。

自分的にはAngular UI Bootstrapのサンプルであるようにstateを絡めないほうが分かりやすいような気もするのですが…  
<https://angular-ui.github.io/bootstrap/#/modal>


CC BY-SA 3.0
2015-08-19T05:54:01.390
14614
2015-08-19T05:54:01.390
2232
14604
answer


あくまでstateとしてモーダルウィンドウを呼び出したい場合は、[`ct.ui.router.extras`](https://github.com/christopherthielen/ui-
router-extras#addons-for-angular-ui-router)のSticky
Stateを使用して[近い動きが実装できます](http://plnkr.co/edit/qgt0RkEnXDPDTdMJPIfy?p=preview)。

上記の公式サンプルを改変して、state経由で`$modal.open`を呼び出すサンプルが下記です。ただ、この実装も不完全で、モーダルを表示してF5リロードをすると、モーダルが閉じた状態で画面が再現されます。ですので、あくまで一例として参考ください。

<http://jsfiddle.net/59naga/7f0gma8z/2/>


CC BY-SA 3.0
2015-09-22T00:50:17.467
16838
2015-09-22T00:50:17.467
9834
14604
answer