点击按钮打开Ionic图像模式

Open an Ionic image modal on button click

本文关键字：Ionic 图像 模式 按钮      更新时间：2023-09-26

我是Ionic的新手，我想创建一个离子模态，点击按钮即可打开图像。我应该使用模态或离子弹出来实现这一点吗？有人能帮我吗？提前谢谢。

我会使用模式窗口。在控制器中（记住在构造函数参数中包含$ionicModal）：

// Init dialog
$ionicModal.fromTemplateUrl(
  'templates/show-image.html', {
    scope: $scope, animation: 'slide-in-up'
  }).then( function( modal ) {
    $scope.modalView = modal;
  }
);
// Open dialog
$scope.buttonClick = function() {
  $scope.myimage = '...';
  $scope.modalView.show();
};

和模态模板show-image.html：

<ion-modal-view>
  <ion-header-bar class="bar-calm">
    <h1 class="title">My Image</h1>
    <div class="buttons"><button class="button button-clear" ng-click="modalView.hide()"><i class="icon ion-close"></i></button></div>
  </ion-header-bar>
  <ion-content>
    <img ng-src="myimage" />
  </ion-content>
</ion-modal-view>
相关文章：