feat(modal): $broadcast 'modal.shown/hidden/removed' from parent scope

Closes #243
ionic-team · Feb 13, 2014 · 110ff9f · 110ff9f
1 parent 0c52fd2
commit 110ff9f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/js/ext/angular/src/service/ionicModal.js b/js/ext/angular/src/service/ionicModal.js
@@ -26,7 +26,7 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
           _this.hide();
         };
 
-        _this.scope.$on('$destroy', function() {
+        self.scope.$on('$destroy', function() {
           $ionicPlatform.offHardwareBackButton(onHardwareBackButton);
         });
 
@@ -36,20 +36,25 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
         this.didInitEvents = true;
       }
 
+      this.scope.$parent.$broadcast('modal.shown', this);
+
     },
     // Hide the modal
     hide: function() {
       var element = angular.element(this.el);
       $animate.removeClass(element, this.animation);
 
       ionic.views.Modal.prototype.hide.call(this);
+
+      this.scope.$parent.$broadcast('modal.hidden', this);
     },
 
     // Remove and destroy the modal scope
     remove: function() {
       var self  = this,
           element = angular.element(this.el);
       $animate.leave(angular.element(this.el), function() {
+        self.scope.$parent.$broadcast('modal.removed', self);
         self.scope.$destroy();
       });
     }
@@ -80,7 +85,7 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
     /**
      * Load a modal with the given template string.
      *
-     * A new isolated scope will be created for the 
+     * A new isolated scope will be created for the
      * modal and the new element will be appended into the body.
      */
     fromTemplate: function(templateString, options) {

diff --git a/js/ext/angular/test/service/ionicModal.unit.js b/js/ext/angular/test/service/ionicModal.unit.js
@@ -54,4 +54,35 @@ describe('Ionic Modal', function() {
 
     expect(modalInstance.el.classList.contains('active')).toBe(false);
   });
+
+  it('should broadcast "modal.shown" on show', function() {
+    var template = '<div class="modal"></div>';
+    var m = modal.fromTemplate(template, {});
+    spyOn(m.scope.$parent, '$broadcast');
+    m.show();
+    expect(m.scope.$parent.$broadcast).toHaveBeenCalledWith('modal.shown', m);
+  });
+  it('should broadcast "modal.hidden" on hide', function() {
+    var template = '<div class="modal"></div>';
+    var m = modal.fromTemplate(template, {});
+    spyOn(m.scope.$parent, '$broadcast');
+    m.hide();
+    expect(m.scope.$parent.$broadcast).toHaveBeenCalledWith('modal.hidden', m);
+  });
+  it('should broadcast "modal.removed" on remove', inject(function($animate) {
+    var template = '<div class="modal"></div>';
+    var m = modal.fromTemplate(template, {});
+    var broadcastedModal;
+    var done = false;
+
+    //By the time m.remove() is done, our scope will be destroyed. so we have to save the modal
+    //it gives us
+    spyOn(m.scope.$parent, '$broadcast').andCallFake(function(e, modal) {
+      broadcastedModal = modal;
+    });
+    spyOn($animate, 'leave').andCallFake(function(el, cb) { cb(); });
+
+    m.remove();
+    expect(broadcastedModal).toBe(m);
+  }));
 });