Ionic - Phương thức Javascript

Khi phương thức Ionic được kích hoạt, ngăn nội dung sẽ xuất hiện trên đầu nội dung thông thường. Modal về cơ bản là cửa sổ bật lên lớn hơn với nhiều chức năng hơn. Modal sẽ bao phủ toàn bộ màn hình theo mặc định nhưng nó có thể được tối ưu hóa theo cách bạn muốn.

Sử dụng phương thức

Có hai cách để triển khai modal trong Ionic. Một cách là thêm mẫu riêng biệt và cách khác là thêm nó vào đầu tệp HTML thông thường, bên trongscriptcác thẻ. Điều đầu tiên chúng tôi cần làm là kết nối phương thức của chúng tôi với bộ điều khiển của chúng tôi bằng cách sử dụng tiêm phụ thuộc góc. Sau đó, chúng ta cần tạo một phương thức. Chúng tôi sẽ chuyển phạm vi và thêm hoạt ảnh vào phương thức của chúng tôi.

Sau đó, chúng ta sẽ tạo các hàm để mở, đóng, hủy modal. Hai hàm cuối cùng được đặt nơi chúng ta có thể viết mã sẽ được kích hoạt nếu một phương thức bị ẩn hoặc bị xóa. Nếu bạn không muốn kích hoạt bất kỳ chức năng nào, khi phương thức bị xóa hoặc ẩn, bạn có thể xóa hai chức năng cuối cùng.

Mã điều khiển

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

Mã HTML

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
		
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

Cách chúng tôi chỉ ra trong ví dụ cuối cùng là khi script được sử dụng làm vùng chứa cho phương thức của chúng tôi bên trong một số tệp HTML hiện có.

Cách thứ hai là tạo một tệp mẫu mới bên trong templatesthư mục. Chúng tôi sẽ sử dụng mã tương tự như trong ví dụ cuối cùng của chúng tôi, nhưng chúng tôi sẽ xóascript thẻ và chúng tôi cũng cần thay đổi fromTemplateUrl trong bộ điều khiển để kết nối phương thức với mẫu mới được tạo.

Mã điều khiển

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-template.html', {
      scope: $scope,
      animation: 'slide-in-up',
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

Mã HTML

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
	
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

Cách thứ ba để sử dụng Ionic modal là chèn nội tuyến HTML. Chúng tôi sẽ sử dụngfromTemplate chức năng thay vì fromTemplateUrl.

Mã điều khiển

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
		
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
		
   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

Tất cả ba ví dụ sẽ có cùng một hiệu ứng. Chúng tôi sẽ tạo một nút để kích hoạt$ionicModal.show() để mở phương thức.

Mã HTML

<button class = "button" ng-click = "openModal()"></button>

Khi chúng ta mở modal, nó sẽ chứa một nút được sử dụng để đóng nó. Chúng tôi đã tạo nút này trong một mẫu HTML.

Ngoài ra còn có các tùy chọn khác để tối ưu hóa phương thức. Chúng tôi đã hướng dẫn cách sử dụngscope và animation. Bảng sau đây cho thấy các tùy chọn khác.

Lựa chọn	Kiểu	Chi tiết
focusFirstInput	boolean	Nó sẽ tự động lấy tiêu điểm đầu vào đầu tiên của phương thức.
backdropClickToClose	boolean	Nó sẽ cho phép đóng phương thức khi chạm vào phông nền. Giá trị mặc định là true.
phần cứngBackButtonClose	boolean	Nó sẽ cho phép đóng phương thức khi nhấp vào nút quay lại phần cứng. Giá trị mặc định là true.