Ionic JavaScript弹出窗口

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

使用Show Popup

这个弹出窗口是最复杂的。要触发弹出窗口，我们需要将 $ 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弹出秀

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

显示弹出选项

选项	类型	详细
template	string	弹出窗口的内联HTML模板。
templateUrl	string	HTML模板的URL。
title	string	弹出窗口的标题。
subTitle	string	弹出窗口的副标题。
cssClass	string	弹出窗口的CSS类名称。
scope	Scope	弹出窗口的范围。
buttons	Array[Object]	按钮将放置在弹出窗口的页脚中。他们可以使用自己的属性和方法。text显示在按钮的顶部，type是用于按钮的Ionic类，onTap是在点击按钮时将触发的功能。返回值将导致使用给定值解析promise。

使用确认弹出窗口

确认弹出窗口是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>

Ionic弹出确认

下表说明了可用于此弹出窗口的选项。

确认弹出选项

选项	类型	详细
template	string	弹出窗口的内联HTML模板。
templateUrl	string	HTML模板的URL。
title	string	弹出窗口的标题。
subTitle	string	弹出窗口的副标题。
cssClass	string	弹出窗口的CSS类名称。
cancelText	string	“取消”按钮的文本。
cancelType	string	“取消”按钮的 Ionic 按钮类型。
okText	string	确定按钮的文本。
okType	string	OK按钮的Ionic按钮类型。

使用警报弹出窗口

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

控制器代码

.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弹出警报

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

警报弹出选项

选项	类型	详细
template	string	弹出窗口的内联HTML模板。
templateUrl	string	HTML模板的URL。
title	string	弹出窗口的标题。
subTitle	string	弹出窗口的副标题。
cssClass	string	弹出窗口的CSS类名称。
okText	string	确定按钮的文本。
okType	string	OK按钮的Ionic按钮类型。

使用提示弹出窗口

可以使用Ionic创建的最后一个Ionic弹出窗口是提示。它有一个OK按钮，通过输入和取消按钮解析带有未定义值的值的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>

它将产生以下屏幕 -

Ionic弹出提示

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

提示弹出选项

选项	类型	详细
template	string	弹出窗口的内联HTML模板。
templateUrl	string	HTML模板的URL。
title	string	弹出窗口的标题。
subTitle	string	弹出窗口的副标题。
cssClass	string	弹出窗口的CSS类名称。
inputType	string	输入的类型。
inputPlaceholder	string	输入的占位符。
cancelText	string	“取消”按钮的文本。
cancelType	string	“取消”按钮的 Ionic 按钮类型。
okText	string	确定按钮的文本。
okType	string	OK按钮的Ionic按钮类型。