From ed4f22889e6b8e28758f3ac637f1cba1e241cbc9 Mon Sep 17 00:00:00 2001
From: Andrew <andytjoslin@gmail.com>
Date: Mon, 7 Jul 2014 13:43:12 -0600
Subject: [PATCH] feat(ionModalView): ion-modal-view to wrap template instead
 of `<div class="modal">`

Closes #1668.

`<div class="modal">` will still work, but adding an `<ion-modal-view>`
element to wrap a modal template is a more "Ionic Looking" way of doing
the same thing.
---
 js/angular/directive/modalView.js | 9 +++++++++
 js/angular/service/modal.js       | 9 +++++----
 scss/_modal.scss                  | 1 +
 test/html/modal.html              | 4 ++--
 4 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 js/angular/directive/modalView.js

diff --git a/js/angular/directive/modalView.js b/js/angular/directive/modalView.js
new file mode 100644
index 0000000000..b2cc85ac2e
--- /dev/null
+++ b/js/angular/directive/modalView.js
@@ -0,0 +1,9 @@
+IonicModule
+.directive('ionModalView', function() {
+  return {
+    restrict: 'E',
+    compile: function(element, attr) {
+      element.addClass('modal');
+    }
+  };
+});
diff --git a/js/angular/service/modal.js b/js/angular/service/modal.js
index ea4605d997..4bf81fc3d9 100644
--- a/js/angular/service/modal.js
+++ b/js/angular/service/modal.js
@@ -8,7 +8,8 @@
  *
  * The Modal is a content pane that can go over the user's main view
  * temporarily.  Usually used for making a choice or editing an item.
- * Note that you need to put the content of the modal inside a div with the class `modal`.
+ *
+ * Put the content of the modal inside of an `<ion-modal-view>` element.
  *
  * Note: a modal will broadcast 'modal.shown', 'modal.hidden', and 'modal.removed' events from its originating
  * scope, passing in itself as an event argument. Both the modal.removed and modal.hidden events are
@@ -17,14 +18,14 @@
  * @usage
  * ```html
  * <script id="my-modal.html" type="text/ng-template">
- *   <div class="modal">
+ *   <ion-modal-view>
  *     <ion-header-bar>
  *       <h1 class="title">My Modal title</h1>
  *     </ion-header-bar>
  *     <ion-content>
  *       Hello!
  *     </ion-content>
- *   </div>
+ *   </ion-modal-view>
  * </script>
  * ```
  * ```js
@@ -76,7 +77,7 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
    * @description
    * Instantiated by the {@link ionic.service:$ionicModal} service.
    *
-   * Hint: Be sure to call [remove()](#remove) when you are done with each modal
+   * Be sure to call [remove()](#remove) when you are done with each modal
    * to clean it up and avoid memory leaks.
    *
    * Note: a modal will broadcast 'modal.shown', 'modal.hidden', and 'modal.removed' events from its originating
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 056a69d779..3e701c9592 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -21,6 +21,7 @@
 }
 
 .modal {
+  display: block;
   position: absolute;
   top: 0;
   z-index: $z-index-modal;
diff --git a/test/html/modal.html b/test/html/modal.html
index 5de3daaaaf..4a82aa6b80 100644
--- a/test/html/modal.html
+++ b/test/html/modal.html
@@ -38,7 +38,7 @@
     </ion-pane>
 
     <script id="modal.html" type="text/ng-template">
-      <div class="modal" ng-controller="ModalCtrl">
+      <ion-modal-view ng-controller="ModalCtrl">
         <ion-header-bar>
           <h1 class="title">New Contact</h1>
           <button class="button button-positive" ng-click="hideModal()">Close</button>
@@ -65,7 +65,7 @@
             </div>
           </div>
         </ion-content>
-      </div>
+      </ion-modal-view>
     </script>
 
     <script>