2013-12-11 8 views
16

角度モーダルウィンドウが現在開いているか閉じているかを確実に判断する方法を探しています。angle-uiモーダルが開いているか閉じているかを確実に判定します(表示または非表示)

標準のブートストラップJSは、このための '表示された'/'隠された'イベントを提供します。

今はmodal.close()関数をラップするだけで、変数を 'closed'に設定できます。さらに、モーダルオブジェクトを削除して、再び開いたときにインスタンス化し直しています。しかし、これは、ユーザが背景をクリックしたり、モーダルを閉じるためにESCキーを押した場合には当てはまりません。

これらのケースをきれいにカバーする方法はありますか?

+0

あなたの本当の機能的なユースケースは何ですか? –

+0

私はあなたの角型アプリで使用されているセキュリティサービスのフォークを使用しています:https://github.com/angular-app/angular-app/blob/master/client/src/common/security/security.js – chmanie

答えて

23

TLDR: モーダルではない上に存在するかどうかを知るには十分であるものは何でも、その後!!$modalStack.getTop() /コントローラー/サービスで工場$modalStackを注入し、自分のアプリでモジュールui.bootstrap.modalを含めます。

詳細なソリューション: 私は同じ問題に直面していたし、私の周り、次の作業を思い付いは:

UI-ブートストラップモーダルを扱うlibに定義されて$modalStackと呼ばれる工場があります。同様のサービスには、getTop()というメソッドがあり、domの最上位のモーダルを返します。 (そして、すべてのモーダルを閉じるメソッドdismissAll())。だから私は小さな機能を持つ小さなモジュールを書いた。

var utilsModule = angular.module('utilsModule', ['ui.bootstrap.modal']); 

utilsModule.factory('modalUtils', [ 
    '$modalStack', 
    function ($modalStack) { 
    return { 
     modalsExist: function() { 
     return !!$modalStack.getTop(); 
     }, 
     closeAllModals: function() { 
     $modalStack.dismissAll(); 
     } 
    }; 
    } 
]); 
+2

typo '$ modalStack.dismisAll();'にあります。 '$ modalStack.dismissAll(); 'にする必要があります。 – Dmitry

+0

この解決策はうまくいきます。 – jlyonsmith

+0

使いやすいです... –

関連する問題