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增加左滑右滑切换图片的效果