在ionic中查看原始图片

文章参考

https://github.com/saimon24/devdactic-mediapopover

 

原理说明：

1、使用$ionicModal 弹出一个层专门用来显示原始图片大小，这个层是背景色是透明的

2、ion-slide-box 和 ion-slide 两个指令完成页面的左右滑动

3、小图页面和大图页面共享$scope

$ionicModal.fromTemplateUrl(templateUrl, {
	scope: $scope,
	animation: 'slide-in-up'
})

 

在页面中显示小图片

<div class="float_left width_33 padding_left_5 padding_right_5" ng-repeat="myimg in goodDetails.img" ng-click="showImages($index)">
	<img ng-src="{{myimg.thumb_url}}" class="img_responsive" >
</div>

 

控制器controller

/**
 * 创建了一个indexController
 * */
angular.module('houseApp')
	.controller('repairDetailController', ["$scope", "repairDetailService","$state","$stateParams","$ionicModal",function($scope, repairDetailService,$state,$stateParams,$ionicModal) {
		
		repairDetailService.getRepairDetail($scope,{
			"id":$stateParams.goodsid
		});

		//显示图片model，index表示当前展示那个具体的图片
		$scope.showImages = function(index) {
			$scope.activeSlide = index;
			$scope.showModal('templates/ownerRepair/image-popover.html');
		};

		//弹出图片层，$scope共享
		$scope.showModal = function(templateUrl) {
			$ionicModal.fromTemplateUrl(templateUrl, {
				scope: $scope,
				animation: 'slide-in-up'
			}).then(function(modal) {
				$scope.modal = modal;
				$scope.modal.show();
			});
		};

		// 关闭modal
		$scope.closeModal = function() {
			$scope.modal.hide();
			$scope.modal.remove()
		};

	}]);

 

显示原始图片子页面

<link rel="stylesheet" href="public/css/img_pop.css">

<div class="modal image-modal transparent" ng-click="closeModal()">
    <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="true" active-slide="activeSlide">
        <ion-slide ng-repeat="myimg in goodDetails.img" style="background: rgba(0,0,0,0.3);">
            <img ng-src="{{myimg.thumb_url}}" class="fullscreen-image"/>
        </ion-slide>
    </ion-slide-box>
</div>

 

备注：附件中的img_pop.rar是CSS样式