使用者在進行拍照上傳之後 ，檢視圖片不清楚，可以新增點選圖片放大的功能。

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