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>

它將生成以下螢幕 -

下表顯示了可用於提示彈出視窗的選項。

提示彈出視窗選項