Ionic & Angular JS - Close custom popup

Problem

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 !

Problem courtesy of: PositivProd

Solution

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

Solution courtesy of: Oliver Castillo

Discussion

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

Discussion courtesy of: Italo Ayres

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...

Discussion courtesy of: Maiko Kuppe

This recipe can be found in it's original form on Stack Over Flow.