ionic 点击图片放大

用户在进行拍照上传之后 ，查看图片不清楚，可以添加点击图片放大的功能。

```

<div class="col"  style="margin-top:5rem;width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center"> 

    <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;" 

            src="img/picImg.png" ng-click="shouBigImage('img/picImg.png')"> 

</div> 

<div id="rightDisplay" ng-if="bigImage" class="popover-backdrop"  style="position: fixed;top: 0;left: 0;z-index: 10; width: 100%;height: 100%;"  ng-click="hideBigImage()"> 

<img class="img-responsive" 

style="position: absolute;top: 10%;left: 50%;z-index: 10;display: block;margin-top: 18px; 

margin-left: -165px;height: 420px;width: 330px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);" 

src="{{Url}}"/> 

</div>

```

相关js代码

```

  //点击图片放大 

$scope.shouBigImage = function (imageName) {  //传递一个参数（图片的URl） 

    $scope.Url = imageName;                  //$scope定义一个变量Url，这里会在大图出现后再次点击隐藏大图使用 

    $scope.bigImage = true;                  //显示大图 

}; 

$scope.bigImage = false;    //初始默认大图是隐藏的 

$scope.hideBigImage = function () { 

    $scope.bigImage = false; 

};

```