在离子滑块中设置div背景图像从SD卡

Question

我想在离子滑块中放大和缩小图像。

为此，我在div中设置了一个图像背景，从SD卡中获取。

但是在离子滑块中显示图像时出现问题，请帮我解决问题。

查看：

<div class="modal image-modal transparent" on-swipe-down="closeModal()">
      <ion-slide-box active-slide="activeSlide">
        <ion-slide ng-repeat="Image in gallery">

          <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false"
          zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%"
          delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)" on-release="updateSlideStatus(activeSlide)">

          <div class="image" ng-style="{'background-image':'url({{sdcardpath}}{{Image.src}})'}"></div>

        </ion-scroll>
      </ion-slide>
    </ion-slide-box>
    </div>

控制器：

.controller('GalleryCtrl', function($scope, $ionicBackdrop, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

      $scope.sdcardpath = cordova.file.externalRootDirectory;

      $scope.gallery = [{
        src: 'img/pic1.jpg'
      }, {
        src: 'img/pic2.jpg'
      }, {
        src: 'img/pic3.jpg'
      }];

      $scope.zoomMin = 1;

      $scope.updateSlideStatus = function(slide) {
        var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
        if (zoomFactor == $scope.zoomMin) {
          $ionicSlideBoxDelegate.enableSlide(true);
        } else {
          $ionicSlideBoxDelegate.enableSlide(false);
        }
      };
    });

Answer 1

我通过更新我的观点解决了这个问题。

查看：

            <div class="modal image-modal transparent" on-swipe-down="closeModal()">
                  <ion-slide-box active-slide="activeSlide">
                    <ion-slide ng-repeat="Image in gallery">
                      <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false"
                      zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%"
                      delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)" on-release="updateSlideStatus(activeSlide)">
                      <img data-ng-src="{{sdcardpath}}{{Images.Path}}" width="100%" on-double-tap="zoomFunction()"/>
                    </ion-scroll>
                  </ion-slide>
                </ion-slide-box>
            </div>