Html 离子应用程序中的离子滑盒问题与模态

我正在使用离子滑块显示图像，单击“幻灯片图像”后，在离子滑块中显示完整图像以滑动完整图像

但我有问题，当我直接返回第一个完整的图像到主屏幕，然后滑块不工作

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

主模板视图：

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

---

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

我通过对控制器的一些更改得到了解决方案

控制器

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

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