Ionic & Angular JS - Close custom popup

Question

my question is probably simple : I want, when the user click in button inside the template, the pop up close. I've actually use this :

My Controller JS :

  $scope.showAlert = function() {
   var alertPopup = $ionicPopup.alert({
     templateUrl: 'templates/popup.html'
   });
   alertPopup.then(function(res) {
     console.log('Thank you for not eating my delicious ice cream cone');
   });

 };

var alertPopup;

 $scope.sendOrder = function() {
  alertPopup.close();
};

With this in my button in template HTML :

<a class="button button-full " style="font-weight: bolder;" id="bwlogin" ng-click="sendOrder()">Fermer
</a>

But I've this error :

>TypeError: Cannot read property 'close' of undefined
>>    at Scope.$scope.sendOrder (controller.js:224)
>>    at $parseFunctionCall (ionic.bundle.js:21037)
>>    at ionic.bundle.js:53344
>>    at Scope.$get.Scope.$eval (ionic.bundle.js:23093)
>>    at Scope.$get.Scope.$apply (ionic.bundle.js:23192)
>>    at HTMLAnchorElement.<anonymous> (ionic.bundle.js:53343)
>>    at HTMLAnchorElement.eventHandler (ionic.bundle.js:11706)
>>    at triggerMouseEvent (ionic.bundle.js:2863)
>>    at tapClick (ionic.bundle.js:2852)
>>    at HTMLDocument.tapMouseUp (ionic.bundle.js:2925)(anonymous function) @ >>ionic.bundle.js:20299$get @ ionic.bundle.js:17249$get.Scope.$apply @ >>ionic.bundle.js:23194(anonymous function) @ ionic.bundle.js:53343eventHandler @ >>ionic.bundle.js:11706triggerMouseEvent @ ionic.bundle.js:2863tapClick @ >>ionic.bundle.js:2852tapMouseUp @ ionic.bundle.js:2925

Anyone can help me ? Thanks for your time !

Answer 1

In your code the first alertPopup variable is out of scope of the sendOrder function. When sendOrder is called. the function is using the undefined value of

var alertPopup;

this should work:

var alertPopup; 

$scope.showAlert = function() {
       alertPopup = $ionicPopup.alert({
         templateUrl: 'templates/popup.html'
       });
       alertPopup.then(function(res) {
         console.log('Thank you for not eating my delicious ice cream cone');
       });

     };

     $scope.sendOrder = function() {
      alertPopup.close();
    };

By example: http://jsbin.com/xuvefatoha/edit?html,js,console,output

Answer 2

You should store your popup as a $scope variable. Something like:

$scope.alert = $ionicPopup.show(...);

So, you can access it later:

$scope.alert.close();

Working Example: http://play.ionic.io/app/ad238765d6d2

Answer 3

Note that this does not work:

$scope.showAlert = function() {
    alertPopup = $ionicPopup.alert({
        templateUrl: 'templates/popup.html'
    }).then(function(res) {
        console.log('Thank you for not eating my delicious ice cream cone');
    });
};

$scope.sendOrder = function() {
    alertPopup.close();
};

$ionicPopup.alert(...) returns what we want, whereas $ionicPopup.alert(...).then(...) returns something similar, but without the close function. Took me a while to get it...