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のやりとり、英語でも頑張って読んだら助かる事ある。てか、助かる。