feat(popup): Support for programatically closing popup. Fixes #854

mlynch · mlynch · commit dc2b24ed6aa1 · 2014-03-20T12:01:53.000-05:00
diff --git a/js/ext/angular/src/service/ionicPopup.js b/js/ext/angular/src/service/ionicPopup.js
@@ -53,8 +53,10 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
         console.log('Tapped!', res);
       }, function(err) {
         console.log('Err:', err);
-      }, function(msg) {
-        console.log('message:', msg);
+      }, function(popup) {
+        // If you need to access the popup directly, do it in the notify method
+        // This is also where you can programatically close the popup:
+        // popup.close();
       });
 
       // A confirm dialog
@@ -252,7 +254,10 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
   var constructPopupOnScope = function(element, scope) {
     var popup = {
       el: element[0],
-      scope: scope
+      scope: scope,
+      close: function() {
+        popAndRemove(this);
+      }
     };
 
     scope.popup = popup;
@@ -318,13 +323,20 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
   };
 
 
+
   // Public API
   return {
+    /**
+     * @private
+     */
     showPopup: function(data) {
       var q = $q.defer();
 
       createPopup(data, q).then(function(popup, scope) {
 
+        // Send the popup back
+        q.notify(popup);
+
         // We constructed the popup, push it on the stack and show it
         pushAndShow(popup, data);
 
@@ -340,7 +352,8 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
      * @name $ionicPopup#show
      * @description show a complex popup. This is the master show function for all popups
      * @param {data} object The options for showing a popup, of the form:
-     *
+     * @returns {Promise} an Angular promise which resolves when the user enters the correct data, and also
+     * sends the constructed popup in the notify function (for programatic closing, as shown in the example above).
      * ```
      * {
      *   content: '', // String. The content of the popup
diff --git a/js/ext/angular/test/popup.html b/js/ext/angular/test/popup.html
@@ -11,11 +11,14 @@
 
   </head>
   <body ng-controller="PopupCtrl">
-    <button class="button button-dark" ng-click="showPopup()">Generic</button>
-    <button class="button button-primary" ng-click="showConfirm()">Confirm</button>
-    <button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
-    <button class="button button-balanced" ng-click="showPasswordPrompt()">Password Prompt</button>
-    <button class="button button-positive" ng-click="showAlert()">Alert</button>
+    <ion-content>
+      <button class="button button-dark" ng-click="showPopup()">Generic</button>
+      <button class="button button-primary" ng-click="showConfirm()">Confirm</button>
+      <button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
+      <button class="button button-balanced" ng-click="showPasswordPrompt()">Password Prompt</button>
+      <button class="button button-positive" ng-click="showAlert()">Alert</button>
+      <div style="height: 3000px; width: 50px; background-color: rgba(0,0,0,0.5);"></div>
+    </ion-content>
 
     <script id="popup-template.html" type="text/ng-template">
       <input ng-model="data.wifi" type="text" placeholder="Password">
@@ -94,11 +97,17 @@
           };
           $scope.showAlert = function() {
             $ionicPopup.alert({
-              title: 'Don\'t eat that!',
-              content: 'It might taste good'
-            }).then(function(res) {
-              console.log('Thank you for not eating my delicious ice cream cone');
-            });
+              title: 'Draft Saved',
+              content: 'Your Data has been saved!'
+              }).then(function(res) {
+                console.log('Your Data has been saved!');
+              }, function(err) {},
+              function(popup) {
+                console.log('Got popup', popup);
+                $timeout(function() {
+                  popup.close();
+                }, 1000);
+              });
           };
       });
     </script>
