Ionic - JavaScript 弹出窗口

---

---

此服务用于在常规视图顶部创建弹出窗口，该窗口将用于与用户交互。弹出窗口有四种类型，即 - **显示**、**确认**、**警报**和**提示**。

使用显示弹出窗口

此弹出窗口是最复杂的。要触发弹出窗口，我们需要将 **$ionicPopup** 服务注入到我们的控制器中，然后只需添加一个方法来触发我们想要使用的弹出窗口，在本例中为 **$ionicPopup.show()**。**onTap(e)** 函数可用于添加 **e.preventDefault()** 方法，如果对输入没有进行任何更改，则此方法将使弹出窗口保持打开状态。当弹出窗口关闭时，承诺对象将被解析。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showPopup = function() {
      $scope.data = {}
    
      // Custom popup
      var myPopup = $ionicPopup.show({
         template: '<input type = "text" ng-model = "data.model">',
         title: 'Title',
         subTitle: 'Subtitle',
         scope: $scope,
			
         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {
						
                  if (!$scope.data.model) {
                     //don't allow the user to close unless he enters model...
                     e.preventDefault();
                  } else {
                     return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });    
   };
})

HTML 代码

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

您可能在上述示例中注意到使用了一些新的选项。下表将解释所有这些选项及其用例。

显示弹出窗口选项

使用确认弹出窗口

确认弹出窗口是 Ionic 弹出窗口的简化版本。它包含“取消”和“确定”按钮，用户可以按下这些按钮来触发相应的函数。它返回一个承诺对象，当按下其中一个按钮时，该对象将被解析。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showConfirm = function() {
	   var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
	};
})

HTML 代码

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>

下表解释了可用于此弹出窗口的选项。

确认弹出窗口选项

使用警报弹出窗口

警报是一个简单的弹出窗口，用于向用户显示警报信息。它只有一个按钮，用于关闭弹出窗口并解析弹出窗口的承诺对象。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
         title: 'Title',
         template: 'Alert message'
      });

      alertPopup.then(function(res) {
         // Custom functionality....
      });
   };
})

HTML 代码

<button class = "button" ng-click = "showAlert()">Add Popup Alert</button>

它将生成以下屏幕 -

下表显示了可用于警报弹出窗口的选项。

警报弹出窗口选项

使用提示弹出窗口

可以使用 Ionic 创建的最后一个 Ionic 弹出窗口是 **提示**。它有一个“确定”按钮，使用输入中的值解析 promise，以及一个“取消”按钮，使用未定义值解析。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showPrompt = function() {
      var promptPopup = $ionicPopup.prompt({
         title: 'Title',
         template: 'Template text',
         inputType: 'text',
         inputPlaceholder: 'Placeholder'
      });
        
      promptPopup.then(function(res) {
         console.log(res);
      });
   };
})

HTML 代码

<button class = "button" ng-click = "showPrompt()">Add Popup Prompt</button>

它将生成以下屏幕 -

下表显示了可用于提示弹出窗口的选项。

提示弹出窗口选项