Ionic 和 Angular JS - 关闭自定义弹出窗口

Question

我的问题可能很简单：我想，当用户单击模板内的按钮时，弹出窗口关闭。我实际上用过这个：

我的控制器 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();
};

在我的模板按钮中使用这个 HTML :

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

但是我有这个错误:

>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

谁能帮帮我？感谢您的宝贵时间！

Answer 1

在您的代码中，第一个 alertPopup 变量超出了 sendOrder 函数的范围。调用 sendOrder 时。该函数正在使用

的未定义值

var alertPopup;

这应该有效：

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();
    };

举个例子： http://jsbin.com/xuvefatoha/edit?html,js,console,output

Answer 2

您应该将弹出窗口存储为 $scope 变量。类似于：

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

所以，您可以稍后访问它：

$scope.alert.close();

工作示例：http://play.ionic.io/app/ad238765d6d2

Answer 3

请注意，这不起作用：

$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 我们想要的，而 $ionicPopup.alert(...).then(...) returns 类似的东西，但没有关闭功能。花了我一段时间才得到它...

Ionic 和 Angular JS - 关闭自定义弹出窗口

Ionic & Angular JS - Close custom popup

popup

angularjs

ionic-framework

ionic