Ionic 相册（可放大缩小图片）

在ionic中使用ion-slide-box—ion-slide—ion-scroll三者结合，创建一个可以放大缩小查看图片的图片浏览器。
第一步：创建视图页面

<ion-view view-title="图片浏览器">
  <ion-content>
<ul>
  <li ng-repeat="image in images track by $index">
    <img ng-src="{{image.url}}" ng-click="showBigImg(images,$index)" style="width: 100%;height: 200px">
  </li>
</ul>
  </ion-content>
</ion-view>

第二步：创建查看大图的modal

<style>
  .transparent {
    background: black !important;
  }
  .slider-slide {
    background-color: black;
  }
  .slider-pager .slider-pager-page{
    color: white;
  }
  .image-modal {
    width: 100% !important;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
  }
  .slider {
    width: 100%;
    height: 100%;
  }
  .image {
    width: 100%;
    background-size: 100%,100%;
    background-repeat: no-repeat;
    background-position: center, center;
  }
</style>
<ion-modal-view >
  <div class="modal image-modal transparent" ng-click="closeModal()">
    <ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="CurrentActiveSlide" delegate-handle="slideHandle">
      <ion-slide ng-repeat="image in modalimages track by $index" >
        <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false" overflow-scroll="false" has-bouncing="true"
                    zooming="true" min-zoom=0.5 delegate-handle='scrollHandle{{$index}}' on-release="reset({{$index}})">
          <div class="image" ng-style="minmax" style="background-image: url( {{image.url}} )"></div>
        </ion-scroll>
      </ion-slide>
    </ion-slide-box>
  </div>
</ion-modal-view>

第三步：创建视图对应的controller

 .controller('DashCtrl', function ($scope,$ionicScrollDelegate,$ionicSlideBoxDelegate,$ionicModal) {
      $scope.images = [
        {url:'http://img15.3lian.com/2015/f2/139/d/22.jpg'},
        {url:'http://img15.3lian.com/2015/f2/136/d/22.jpg'},
           {url:'http://v1.qzone.cc/pic/201509/02/17/27/55e6c1135b240807.jpg%21600x600.jpg'},
 {url:'http://img4.duitang.com/uploads/item/201409/12/20140912164046_CSt5s.thumb.700_0.jpeg'},
        {url:'http://images.aituyizu.cn/allimg/1501/1-150109144Q6.jpg'}
      ];
      $scope.openModal = function (data, index) {
             $ionicModal.fromTemplateUrl('templates/modal-dynamic-image.html', {
        scope: $scope,
        animation: 'silde-in-left'
      }).then(function (modal) {
        $scope.modalimages = [];
        $scope.modalimages = data;
        $scope.CurrentActiveSlide = index;
        $ionicScrollDelegate.$getByHandle('scrollHandle'+index).zoomTo(1, false, 0, 0);
        $scope.modal = modal;
        $scope.modal.show();
      };
      $scope.slideHasChanged = function (index) {
        $ionicScrollDelegate.$getByHandle('scrollHandle'+index).zoomTo(1, false, 0, 0);
        $scope.CurrentActiveSlide = index;
      };
      $scope.closeModal = function () {
          $scope.modal.remove()
        .then(function() {
          $scope.modal = null;
        });
      };
      $scope.$on('$destroy', function () {
        $scope.modal.remove();
      });
      //显示大图
      $scope.showBigImg = function (url, id) {
        $scope.openModal(url, id);
      };

      $scope.minmax = {
        'max-height':$(window).height(),
        'min-height':$(window).height()
      };

      $scope.reset = function(index){
        if($ionicScrollDelegate.$getByHandle('scrollHandle'+index).getScrollView().__zoomLevel<1){
          $ionicScrollDelegate.$getByHandle('scrollHandle'+index).zoomTo(1, false, 0, 0);
        }
      };
    })

在ion-scroll中需要加入overflow-scroll=”false”才可以放大缩小图片。
$ionicScrollDelegate.$getByHandle(‘scrollHandle’+index).zoomTo(1, false, 0, 0);是将图片的缩放级别设置为1。
$ionicScrollDelegate.$getByHandle(‘scrollHandle’+index).getScrollView().__zoomLevel是获取当前缩放级别。