Question

我使用离子滑块显示图像，点击幻灯片图像后，在离子滑块中显示完整图像，以滑动完整图像。

但是当我将第一张完整图片直接反映到主屏幕然后滑块无法正常工作时，我遇到了问题。

我使用了以下视图和控制器。

主页模板查看：

        <ion-view view-title="Home">
          <ion-content>
            <div class="padding">
                <ion-slide-box>
                <ion-slide ng-repeat="Image in gallery" ng-click="showImages($index)" repeat-done="repeatDone()">
                      <img data-ng-src="{{sdcardpath}}{{Image.Path}}" width="100%"/>
                  <ion-slide>
                </ion-slide-box>
          </div>
          </ion-content>
          </ion-view>

控制器：

        .controller('HomeController', function($scope,$cordovaFile,$ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicPopup, $timeout) {
           $scope.sdcardpath = cordova.file.externalRootDirectory + foldername;
           $scope.gallery = [
            { Path: 'img1.png' },
            { Path: 'img2.png' },
            { Path: 'img3.png' },
          ];

           $scope.repeatDone = function() {
            $ionicSlideBoxDelegate.update();
          };

          /*
           * Show Full Screen Sliding Gallery Images
          */
          $scope.showImages = function(index) {
            $scope.activeSlide = index;
            $scope.showModal('templates/image-popover.html');
          };

          $scope.showModal = function(templateUrl) {
               $ionicModal.fromTemplateUrl(templateUrl, {
               scope: $scope
            }).then(function(modal) {
               $scope.modal = modal;
               $scope.modal.show();
            });
          };

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

模态视图：image-popover.html

        <div class="modal image-modal">
          <ion-slide-box active-slide="activeSlide" show-pager="false">
            <ion-slide ng-repeat="Images in gallery">

              <ion-scroll direction="xy" locking="false" 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%"/>
            </ion-scroll>
          </ion-slide>
        </ion-slide-box>
        </div>

和指令：repeatDone

     .directive('repeatDone', function () {
       return function (scope, element, attrs) {
         if (scope.$last) { // all are rendered
           scope.$eval(attrs.repeatDone);
         }
       }

所以请帮助解决这个问题。

Answer 1

我通过Controller中的一些更改得到了解决方案。

<强>控制器

        .controller('HomeController', function($scope,$cordovaFile,$ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicPopup, $timeout) {
           $scope.sdcardpath = cordova.file.externalRootDirectory + foldername;
           $scope.gallery = [
            { Path: 'img1.png' },
            { Path: 'img2.png' },
            { Path: 'img3.png' },
          ];

           $scope.repeatDone = function() {
            $ionicSlideBoxDelegate.update();
          };

          /*
           * Show Full Screen Sliding Gallery Images
          */
          $scope.showImages = function(index) {
            $scope.activeSlide = index;
            $scope.showModal('templates/image-popover.html');
          };

          $scope.showModal = function(templateUrl) {
               $ionicModal.fromTemplateUrl(templateUrl, {
               scope: $scope
            }).then(function(modal) {
               $scope.modal = modal;
               $scope.modal.show();
            });
          };
            //Cleanup the modal when we're done with it!
        $scope.$on('$destroy', function() {
          $scope.modal.remove();
          $ionicSlideBoxDelegate.enableSlide(true);
          $ionicSlideBoxDelegate.update();
        });
        // Execute action on hide modal
        $scope.$on('modal.hidden', function() {
          // Execute action
            $ionicSlideBoxDelegate.enableSlide(true);
            $ionicSlideBoxDelegate.update();
        });
        // Execute action on remove modal
        $scope.$on('modal.removed', function() {
          // Execute action
            $ionicSlideBoxDelegate.enableSlide(true);
            $ionicSlideBoxDelegate.update();
        });

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

Ionic App中使用模态的离子滑动盒问题

1 个答案: