2016-01-23 55 views
-1

我開發了離子幻燈片和呼叫網絡服務,現在當第一個網絡服務完成離子幻燈片並呼叫第二個網絡服務時,我必須調用另一個網絡服務。在離子幻燈片上撥打設置的網絡服務

.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

回答

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

+0

如何顯示上ionic.I月曆試過,但它不工作 – divakar

+0

SRY我不知道這張幻燈片用於圖像。 –

+0

不是圖像我問像用戶交互每月日曆 – divakar