html - Ionic App 中模态的 ionic 滑动框问题

Question

我正在使用 ion-slider 来显示图像，在单击幻灯片图像后，在 ion-slider 中显示完整图像以滑动完整图像。

但是当我先直接将完整图像返回到主屏幕然后 slider 不起作用时，我遇到了问题。

我使用了以下 View 和 Controller 。

主页模板 View :

        <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 :

        .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

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