AngularJS 1.4.1でモーダル(Modal)が閉じない。もしくは、表示上閉じたのにDOMが残る件の対策。
結論。
angular1.4.1の場合(1.4系全部かもしれない。調べてない)、
modalProviderのモーダルを閉じるには、テンポラリなもののこれを入れておけば良い。
angular.module('MY_MODULE_NAME').config(function($modalProvider) {
$modalProvider.options.animation = false;
});
※ちなみに、このissue自体、この記事の記述時点では正式には解決されていないぽい。
Modal Dialog doesn't fade out · Issue #3633 · angular-ui/bootstrap · GitHub
経緯。
あるとき、作成中のAngularアプリにng-touchを導入しようとしたところ、
Angularのバージョン上げないとだめだよっとおこられたので、
以下の通り、angularのバージョンをゴリっと変更してみた。
(bower.jsonの中身の一部をひろったもの)
<従来>
"dependencies": {
"angular-ui-bootstrap-bower": "0.12.0",
"angular-route": "1.2.28",
"angular-animate": "1.2.28"
}
<バージョンアップ後>
"dependencies": {
"angular": "1.4.1", // なぜか以前までversion指定してなかったのでこの機会に追加。orz
"angular-ui-bootstrap-bower": "0.13.0",
"angular-route": "1.4.1",
"angular-animate": "1.4.1",
"angular-touch": "1.4.1"
}
すると、アプリの冒頭で、注意書きをモーダルで表示したいたのだが、
そのモーダルを閉じた後、何も操作を受け付けなくなった。
ng-clickとかが効かなくなった?とかよくわからず調査をしていると、
モーダルが表示上は消えたものの、
DOMとして残って画面全体を覆てるではありませんか。
z-index:1050だっけ? display: block。がーん。
一旦、さくっとテンポラリーな調整で動かせるようにならないかとstyleを
modal.closeに合わせて調整できないか試みるも、
ng-templateつかってモーダル表示していたので、単純にはstyle指定がしづらい状態に。
ふむ。
調べると、冒頭に貼ったissueや、それにちかいやりとりがちらほら。
読み進めて、一次対応として良さそうなのを取り込んだら動いたので、
それをメモしておく。
<学び>
frontendのミドルウェアを駆使しているときは特に、
操作が効かなくなったら、DOMの重なりがおかしいことを疑ったら良さそう。
issueのやりとり、英語でも頑張って読んだら助かる事ある。てか、助かる。