fix(modal): Remove modal flicker, closes #1150

ionic-team · May 2, 2014 · d2ebed8 · d2ebed8
1 parent ae3ae34
commit d2ebed8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/js/angular/service/modal.js b/js/angular/service/modal.js
@@ -94,7 +94,10 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
       var modalEl = angular.element(self.modalEl);
 
       self.el.classList.remove('hide');
-      $document[0].body.classList.add('modal-open');
+      $timeout(function(){
+        $document[0].body.classList.add('modal-open');
+      }, 400)
+
 
       if(!self.el.parentElement) {
         modalEl.addClass(self.animation);

diff --git a/test/html/modal.html b/test/html/modal.html
@@ -40,6 +40,7 @@ <h1 class="title">Modal</h1>
       <div class="modal" ng-controller="ModalCtrl">
         <ion-header-bar>
           <h1 class="title">New Contact</h1>
+          <button class="button button-positive" ng-click="hideModal()">Close</button>
         </ion-header-bar>
         <ion-content>
           <div class="padding">

diff --git a/test/unit/angular/service/modal.unit.js b/test/unit/angular/service/modal.unit.js
@@ -60,6 +60,7 @@ describe('Ionic Modal', function() {
   it('show & remove should add .model-open to body', inject(function() {
     var instance = modal.fromTemplate('<div class="modal">hi</div>');
     instance.show();
+    timeout.flush();
     expect(angular.element(document.body).hasClass('modal-open')).toBe(true);
     instance.remove();
     timeout.flush();
@@ -69,6 +70,7 @@ describe('Ionic Modal', function() {
   it('show & hide should add .model-open body', inject(function() {
     var instance = modal.fromTemplate('<div class="modal">hi</div>');
     instance.show();
+    timeout.flush();
     expect(angular.element(document.body).hasClass('modal-open')).toBe(true);
     instance.hide();
     timeout.flush();
@@ -130,7 +132,7 @@ describe('Ionic Modal', function() {
     instance.$el.triggerHandler('click');
     expect(instance.hide).toHaveBeenCalled();
   });
-  
+
   it('should remove click listener on hide', function() {
     var template = '<div class="modal"></div>';
     var instance = modal.fromTemplate(template);