2

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できませんでした。

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

2 件の回答 2

1

あくまでstateとしてモーダルウィンドウを呼び出したい場合は、ct.ui.router.extrasのSticky Stateを使用して近い動きが実装できます

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

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

2
  • 情報ありがとうございます。これすばらしいですね。ただ、ためしに作ってみたところ少し問題があります。ひとつはモーダルからの戻り時に元のstateを再度実行してしまうようです。戻るときは「モーダルが消えるだけ」に出来ればいいのですが、設定で出来ますでしょうか。。。
    – dayo
    Commented 2015年10月1日 8:57
  • すみません。勘違い&設定間違いでした。ui-router-extrasを使うとやりたいことが出来ますね!ありがとうございます。
    – dayo
    Commented 2015年10月2日 0:12
0

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

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

3
  • コメントありがとうございます。 モーダルを呼び出すだけであれば、parentを指定しなくても実行できるのです。 しかし、parentを指定しない場合、モーダルを表示している裏側が、期待した画面(呼び出しもとの画面)になってくれないようです。 確かに、モーダル自体にstateを入れないで実現するほう方法はあると思います。 しかし、モーダルでない画面機能はstateで管理して、モーダルはそれ以外で管理してとなるとすっきりしなかったので何か方法が無いかな と思って質問させていただきました。
    – dayo
    Commented 2015年8月19日 6:13
  • こちらで確認したところ、nameにドット付きのステートを指定すれば親ステートを同時に指定できましたが、ダメでしょうか。
    – naga3
    Commented 2015年8月19日 6:22
  • 説明が下手ですみません。 stateのnameに階層指定する方法はうまくいきます。 しかし、それでは、モーダルA側が「どこから使われるか」をすべて把握した上で定義しておかないといけないです。 それをしない場合、使う側が「モーダルAのtemplateUrlとcontroller」をそれぞれ把握しておかなければいけないです。 なので、ベースとなるstateは親無しでモーダルAで定義して、親は使う側が定義できないのかな。と考えています。現時点で方法がわかりません(T-T
    – dayo
    Commented 2015年8月19日 6:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。