Ionic - Javascript Popover

Đây là chế độ xem sẽ xuất hiện phía trên chế độ xem thông thường.

Sử dụng Popover

Popover có thể được tạo bằng cách sử dụng ion-popover-viewthành phần. Phần tử này sẽ được thêm vào mẫu HTML và$ionicPopover dịch vụ cần được đưa vào bộ điều khiển.

Có ba cách để thêm cửa sổ bật lên. Cái đầu tiên làfromTemplate, cho phép sử dụng mẫu nội tuyến. Cách thứ hai và thứ ba để thêm cửa sổ bật lên là sử dụngfromTemplateUrl phương pháp.

Hãy để chúng tôi hiểu fromtemplate như giải thích bên dưới.

Mã bộ điều khiển cho phương pháp Fromtemplate

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
   // .fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

Như đã thảo luận ở trên, cách thứ hai và thứ ba để thêm cửa sổ bật lên là sử dụng fromTemplateUrlphương pháp. Mã bộ điều khiển sẽ giống nhau cho cả hai cách ngoại trừfromTemplateUrl giá trị.

Nếu HTML được thêm vào mẫu hiện có, URL sẽ là popover.html. Nếu chúng ta muốn đặt HTML vào thư mục mẫu, thì URL sẽ thay đổi thànhtemplates/popover.html.

Cả hai ví dụ đã được giải thích dưới đây.

Mã bộ điều khiển cho fromTemplateUrl

.controller('MyCtrl', function($scope, $ionicPopover) {

   $ionicPopover.fromTemplateUrl('popover.html', {
      scope: $scope
   }).then(function(popover) {
      $scope.popover = popover;
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

Bây giờ, chúng tôi sẽ thêm script với mẫu cho tệp HTML, mà chúng tôi đang sử dụng để gọi hàm bật qua.

Mã HTML từ tệp HTML Hiện tại

<script id = "popover.html" type = "text/ng-template">
   <ion-popover-view>
	
      <ion-header-bar>
         <h1 class = "title">Popover Title</h1>
      </ion-header-bar>
		
      <ion-content>
         Popover Content!
      </ion-content>
		
   </ion-popover-view>
</script>

Nếu chúng ta muốn tạo HTML dưới dạng một tệp riêng biệt, chúng ta có thể tạo một tệp HTML mới trong templates thư mục và sử dụng mã giống như chúng tôi đã sử dụng trong ví dụ đã đề cập ở trên mà không có script các thẻ.

Tệp HTML mới được tạo như sau.

<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>
	
   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

Điều cuối cùng chúng ta cần là tạo một nút sẽ được nhấp để hiển thị cửa sổ bật lên.

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>

Dù chúng ta chọn cách nào từ các ví dụ trên, kết quả đầu ra sẽ luôn giống nhau.

Bảng sau đây cho thấy $ionicPopover các phương pháp có thể được sử dụng.

phương pháp	Lựa chọn	Kiểu	Chi tiết
khởi tạo (tùy chọn)	phạm vi, tiêu điểm, đầu tiên, phông nềnClickToClose, phần cứngBackButtonClose	đối tượng, boolean, boolean, boolean	Scopeđược sử dụng để chuyển phạm vi tùy chỉnh đến cửa sổ bật lên. Mặc định là $ rootScope.focusFirstInput được sử dụng để tự động lấy tiêu điểm đầu vào đầu tiên của cửa sổ bật lên. backdropClickToClose được sử dụng để đóng cửa sổ bật lên khi nhấp vào phông nền. hardwareBackButtonClose được sử dụng để đóng cửa sổ bật lên khi nhấn nút quay lại phần cứng.
hiển thị ($ sự kiện)	$ sự kiện	lời hứa	Giải quyết khi cửa sổ bật lên kết thúc hiển thị.
ẩn giấu()	/	lời hứa	Đã giải quyết khi ẩn xong cửa sổ bật lên.
tẩy()	/	lời hứa	Đã giải quyết xong khi xóa xong cửa sổ bật lên.
isShown ()	/	Boolean	Trả về true nếu cửa sổ bật lên được hiển thị hoặc false nếu không hiển thị.