Ionic — Javascript Modal

Когда активирована ионная модальность, панель контента появится поверх обычного контента. Модал в основном больше всплывающих с большим количеством функций. По умолчанию модальный будет охватывать весь экран, но его можно оптимизировать так, как вы хотите.

Используя модал

Существует два способа реализации модального в Ionic. Один из способов — добавить отдельный шаблон, а другой — добавить его поверх обычного HTML-файла внутри тегов скрипта . Первое, что нам нужно сделать, это подключить наш модал к нашему контроллеру с помощью инжекции угловой зависимости. Тогда нам нужно создать модал. Мы перейдем в область и добавим анимацию в наш модал.

После этого мы создадим функции для открытия, закрытия, уничтожения модальных. Последние две функции размещены там, где мы можем написать код, который будет срабатывать, если модальный скрыт или удален. Если вы не хотите запускать какие-либо функции, при удалении или скрытии модального окна вы можете удалить две последние функции.

Код контроллера

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

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>

Способ, который мы показали в последнем примере, — это когда скрипт- тег используется в качестве контейнера для нашего модального интерфейса внутри некоторого существующего HTML-файла.

Второй способ — создать новый файл шаблона в папке с шаблонами . Мы будем использовать тот же код, что и в нашем последнем примере, но мы удалим теги сценария, а также нам нужно изменить fromTemplateUrl в контроллере, чтобы связать модальный с новым созданным шаблоном.

Код контроллера

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

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>

Третий способ использования ионной модальности — это вставка встроенного HTML-кода. Мы будем использовать функцию fromTemplate вместо fromTemplateUrl .

Код контроллера

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

Все три примера будут иметь одинаковый эффект. Мы создадим кнопку для запуска $ ionicModal.show (), чтобы открыть модальный режим .

HTML-код

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

Когда мы открываем модальный, он будет содержать кнопку, которая будет использоваться для его закрытия. Мы создали эту кнопку в шаблоне HTML.

Есть и другие варианты для модальной оптимизации. Мы уже показали, как использовать область и анимацию . В следующей таблице показаны другие параметры.