ionic之点击放大图片

开发过程中常常会遇到点击展示大图片的需求，只需要ng-if，popover-backdrop(弹出框) 就可以轻松实现。
html：

<ion-view>
  <ion-content>
    <div class="item item-input-inset">
      <img ng-src="{{faceImages.screenImageUrl}}" ng-click="showBigImage(faceImages.screenImageUrl)">
    </div>
  </ion-content>
</ion-view>

js:

angular.module("app").controller("faceImagesCtrl", ["$scope", "$ionicPopover",
  "$cordovaStatusbar",
  function ($scope, $ionicPopover, $cordovaStatusbar) {
    "use strict";
  
    $scope.bigImagesUrl = "";

    $ionicPopover.fromTemplateUrl(“templates/common/big_image.html”, {
      scope: $scope
    }).then(function (popover) {
      $scope.popover = popover;
    });

    $scope.showBigImage = function (url) {
      $scope.bigImagesUrl = url;
      $scope.popover.show();
      $cordovaStatusbar.hide();
    };

    $scope.hideBigImage = function () {
      $scope.bigImagesUrl = "";
      $scope.popover.hide();
      $cordovaStatusbar.show();
    };
  }]);

弹出框html：

<div ng-if="bigImagesUrl" class="popover-backdrop shade" ng-click="hideBigImage()">
  <img class="bigImage" ng-src="{{bigImagesUrl}}"/>
</div>

css样式：

.shade {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.bigImage {
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 10;
  display: block;
  transform: translateX(-50%);
  max-height: 100%;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

也可以运用on-swipe增加左滑右滑切换图片的效果