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 弹出窗口是提示。它有一个“确定”按钮，用于解析来自输入的值的承诺，以及一个“取消”按钮，用于解析未定义的值。

控制器代码

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

它将产生以下屏幕 -

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

提示弹出选项