在离子

Question

我开发了离子幻灯片和调用Web服务，现在我必须在离子幻灯片中完成第一个Web服务并调用第二个Web服务时调用另一个Web服务。

.controller('LandingCtrl', function ($scope, $state,ItemService,$http, $ionicPopup,$ionicSlideBoxDelegate,$ionicLoading,$filter) {
      $http.get("http://rss.xyz.com/calen/detail_page.asp?month=1&year=2016")
      .success(function(response) {
                   $scope.names = response.Date;
                   console.log(JSON.stringify( response));
                   setTimeout(function() {
                   $scope.date = $filter("date")(Date.now(), 'dd');
                   console.log($scope.date)
                   $ionicSlideBoxDelegate.slide($scope.date-1);
                   $ionicSlideBoxDelegate.update();
                   $scope.$apply();
                     });
                    $ionicLoading.hide();
                              })
                      };

上面的代码是第一个Web服务，当离子幻灯片完成第一个web服务时，它使用相同的离子幻灯片调用第二个Web服务。

第二个Web服务是 “http://rss.xyz.com/calen/detail_page.asp?month=2&year=2016”

Answer 1

$scope.date = [];

$http.get('http://rss.xyz.com/calen/detail_page.asp?month=1&year=2016').success(function(response) {
    $scope.dates = response;
    $ionicLoading.hide();
 $scope.loadMore = function() {
    for (var i = 0; i < 10; i++) {
        $scope.date.push();
    }
};
$scope.date();  


});

//  $scope.feeds_categories = JSON.parse(localStorage.getItem('RecentList'));


$ionicModal.fromTemplateUrl('image-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
$scope.feeds_categories = JSON.parse(localStorage.getItem('RecentList'));
});

$scope.openModal = function(index) {
//alert(index);
  $scope.modal.show();
  $ionicSlideBoxDelegate.slide(index);
};

$scope.closeModal = function() {
  $scope.modal.hide();
};

$scope.slideChanged = function(index) {
  $scope.slideIndex = index;
};

// Call this functions if you need to manually control the slides
$scope.next = function() {
  $ionicSlideBoxDelegate.next();
};

$scope.previous = function() {
  $ionicSlideBoxDelegate.previous();
};

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

HTML

 <ion-view">
 <ion-nav-buttons side="left">
  <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
 </ion-nav-buttons>
 <ion-nav-title>
 <span>title</span>
 </ion-nav-title>
 <ion-content>
 <div class="row categories-list">
 <div ng-repeat="dates in date" class="col col-50" when-scrolled="loadMore()">
    <div class="feed-category" ng-click="openModal($index)">
      <pre-img ratio="_1_1" helper-class="square-image">
        <img class="category-image" ng-src="{{dates.image}}" spinner-on-load>
      </pre-img>
    </div>
  </div>
</div>
</ion-content>

<script id="image-modal.html" type="text/ng-template">
    <div class="modal image-modal transparent"
         ng-click="closeModal()">

        <ion-slide-box active-slide="activeSlide">
            <ion-slide ng-repeat="oImage in feeds_categories">
                <ion-scroll direction="xy" locking="false" scrollbar-x="false" scrollbar-y="false" class="scrollCanvas"
                            zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%;" delegate-handle="scrollHandle{{$index}}">
                    <img ng-src="{{oImage.image}}" width="100%" class="image"/>
                </ion-scroll>
            </ion-slide>
        </ion-slide-box>
    </div>
</script>