Ionic - JavaScript Popup

Dịch vụ này được sử dụng để tạo một cửa sổ bật lên phía trên chế độ xem thông thường, cửa sổ này sẽ được sử dụng để tương tác với người dùng. Có bốn loại cửa sổ bật lên cụ thể là:show, confirm, alert và prompt.

Sử dụng Hiển thị Cửa sổ bật lên

Cửa sổ bật lên này là phức tạp nhất. Để kích hoạt cửa sổ bật lên, chúng ta cần đưa$ionicPopup dịch vụ cho bộ điều khiển của chúng tôi và sau đó chỉ cần thêm một phương thức sẽ kích hoạt cửa sổ bật lên mà chúng tôi muốn sử dụng, trong trường hợp này $ionicPopup.show(). CáconTap(e) chức năng có thể được sử dụng để thêm e.preventDefault()phương thức này sẽ giữ cho cửa sổ bật lên luôn mở, nếu không có thay đổi nào được áp dụng cho đầu vào. Khi cửa sổ bật lên đóng lại, đối tượng đã hứa sẽ được giải quyết.

Mã điều khiển

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

Mã HTML

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

Bạn có thể nhận thấy trong ví dụ nêu trên một số tùy chọn mới đã được sử dụng. Bảng sau đây sẽ giải thích tất cả các tùy chọn đó và trường hợp sử dụng của chúng.

Hiển thị tùy chọn cửa sổ bật lên

Lựa chọn	Kiểu	Chi tiết
bản mẫu	chuỗi	Mẫu HTML nội tuyến của cửa sổ bật lên.
templateUrl	chuỗi	URL của mẫu HTML.
tiêu đề	chuỗi	Tiêu đề của cửa sổ bật lên.
subTitle	chuỗi	Phụ đề của cửa sổ bật lên.
cssClass	chuỗi	Tên lớp CSS của cửa sổ bật lên.
phạm vi	Phạm vi	Phạm vi của cửa sổ bật lên.
nút	Mảng [Đối tượng]	Các nút sẽ được đặt ở chân trang của cửa sổ bật lên. Họ có thể sử dụng các thuộc tính và phương pháp của riêng họ.text được hiển thị trên đầu nút, type là lớp Ionic được sử dụng cho nút, onTaplà chức năng sẽ được kích hoạt khi nhấn vào nút. Trả về một giá trị sẽ làm cho lời hứa được giải quyết với giá trị đã cho.

Sử dụng cửa sổ bật lên xác nhận

Một cửa sổ bật lên Xác nhận là phiên bản đơn giản hơn của cửa sổ bật lên Ionic. Nó chứa các nút Hủy và OK mà người dùng có thể nhấn để kích hoạt chức năng tương ứng. Nó trả về đối tượng đã hứa được giải quyết khi một trong các nút được nhấn.

Mã điều khiển

.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!');
         }
      });
	};
})

Mã HTML

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

Bảng sau giải thích các tùy chọn có thể được sử dụng cho cửa sổ bật lên này.

Xác nhận tùy chọn cửa sổ bật lên

Lựa chọn	Kiểu	Chi tiết
bản mẫu	chuỗi	Mẫu HTML nội tuyến của cửa sổ bật lên.
templateUrl	chuỗi	URL của mẫu HTML.
tiêu đề	chuỗi	Tiêu đề của cửa sổ bật lên.
subTitle	chuỗi	Phụ đề của cửa sổ bật lên.
cssClass	chuỗi	Tên lớp CSS của cửa sổ bật lên.
celText	chuỗi	Văn bản cho nút Hủy.
hủy	chuỗi	Loại nút Ionic của nút Hủy.
okText	chuỗi	Văn bản cho nút OK.
okType	chuỗi	Loại nút Ionic của nút OK.

Sử dụng cửa sổ bật lên cảnh báo

Cảnh báo là một cửa sổ bật lên đơn giản được sử dụng để hiển thị thông tin cảnh báo cho người dùng. Nó chỉ có một nút được sử dụng để đóng cửa sổ bật lên và giải quyết đối tượng đã hứa của cửa sổ bật lên.

Mã điều khiển

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

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

Mã HTML

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

Nó sẽ tạo ra màn hình sau:

Bảng sau đây hiển thị các tùy chọn có thể được sử dụng cho cửa sổ bật lên cảnh báo.

Tùy chọn cửa sổ bật lên cảnh báo

Lựa chọn	Kiểu	Chi tiết
bản mẫu	chuỗi	Mẫu HTML nội tuyến của cửa sổ bật lên.
templateUrl	chuỗi	URL của mẫu HTML.
tiêu đề	chuỗi	Tiêu đề của cửa sổ bật lên.
subTitle	chuỗi	Phụ đề của cửa sổ bật lên.
cssClass	chuỗi	Tên lớp CSS của cửa sổ bật lên.
okText	chuỗi	Văn bản cho nút OK.
okType	chuỗi	Loại nút Ionic của nút OK.

Sử dụng cửa sổ bật lên nhắc nhở

Cửa sổ bật lên Ionic cuối cùng có thể được tạo bằng Ionic là prompt. Nó có nút OK giải quyết lời hứa với giá trị từ đầu vào và nút Hủy giải quyết với giá trị không xác định.

Mã điều khiển

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

Mã HTML

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

Nó sẽ tạo ra màn hình sau:

Bảng sau đây hiển thị các tùy chọn có thể được sử dụng cho cửa sổ bật lên nhanh chóng.

Tùy chọn bật lên nhắc nhở

Lựa chọn	Kiểu	Chi tiết
bản mẫu	chuỗi	Mẫu HTML nội tuyến của cửa sổ bật lên.
templateUrl	chuỗi	URL của mẫu HTML.
tiêu đề	chuỗi	Tiêu đề của cửa sổ bật lên.
subTitle	chuỗi	Phụ đề của cửa sổ bật lên.
cssClass	chuỗi	Tên lớp CSS của cửa sổ bật lên.
kiểu đầu vào	chuỗi	Loại cho đầu vào.
inputPlaceholder	chuỗi	Một trình giữ chỗ cho đầu vào.
celText	chuỗi	Văn bản cho nút Hủy.
hủy	chuỗi	Loại nút Ionic của nút Hủy.
okText	chuỗi	Văn bản cho nút OK.
okType	chuỗi	Loại nút Ionic của nút OK.