當html頁面加載第一次離子滑塊不起作用

當頁面加載時，我的離子滑塊不起作用。如果我刷新頁面，那麼它的工作正常。我參考了一些鏈接，但無法解決這個問題。請幫助我。當html頁面加載第一次離子滑塊不起作用

我的html代碼。

<ion-view view-title="" hide-back-button="true"> 
    <ion-content class="padding" style="top: 48px;" ng-show="viewEntered"> 
    <ion-item ng-show="emptyCategory"> 
     <h2 style="text-align:center; font-weight:bold; white-space:normal;">No category found.</h2> 
    </ion-item> 
    <div class="row" ng-repeat="categoryDetail in categoryDetailList"> 
     <div class="col card" style="margin-bottom:5px;margin-top:5px;" ng-if="categoryDetail.token==1"> 
     <div class="row no-padding"> 
      <div class="col col-33 no-padding"><img ng-src={{categoryDetail.image}} height="110px;" width="100%;"> </div> 
      <div class="col col-67 no-padding-top"> 
      <div class="row responsive-md no-padding-top" style="margin:0;"> 
       <div class="col no-padding" style="margin: 0;">{{categoryDetail.title}}</div> 
       <div class="col no-padding" style="margin: 0;"><i class="icon ion-android-call"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.phoneNo}} </span></div> 
       <div class="col no-padding" style="margin: 0;"><i class="icon ion-android-mail"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.email}} </span></div> 
       <div class="col no-padding" style="margin: 0;"><i class="icon ion-location"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.location_name}} </span></div> 
       <div class="col no-padding" style="margin: 0;"><i class="icon ion-ios-world-outline"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.website}} </span></div> 
      </div> 
      </div> 
     </div> 
     <div ng-if="categoryDetail.paidStatus == 1" class="col" style="margin: 0;text-align: right;border-top:1px solid #AFAFAF;"> 
      <button class="button button-small icon-right ion-android-arrow-dropright-circle button-dark" ng-click="getcategoryDeail(categoryDetail.id)"> 
      View Details 
      </button> 
     </div> 
     </div> 
    </div> 

    <div class="row" style="margin-top: 15px;"> 
     <ion-slide-box does-continue="true" auto-play="true" slide-interval="2000" on-slide-changed="slideHasChanged($index)"> 
     <ion-slide ng-repeat="advertise in advertiseDetailList" > 
      <div ng-class="getRandomColor(advertise.profileId)" ui-sref="app.categoryDetail({detailsId: advertise.profileId})"> 
      <img ng-src="{{advertise.image}}" width="100%" height="125px" /> 
      </div> 
     </ion-slide> 
     </ion-slide-box> 
    </div> 
    </ion-content> 
</ion-view>

我的控制器代碼：

.controller('CategoryIdDetailController', function($timeout, $scope, $http, $state, baseUrl, $ionicLoading, $stateParams, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) { 

    $scope.$on("$ionicView.enter", function() { 
    $scope.viewEntered = true; 
    }); 
    $scope.$on("$ionicView.beforeLeave", function() { 
    $scope.viewEntered = false; 
    }); 

    $ionicLoading.show({ 
    template: '<ion-spinner icon="spiral"></ion-spinner>' 
    }); 

    $scope.advertiseDetailList = []; 

    $http({ 
    method : "GET", 
    url : baseUrl+"category_id="+$stateParams.categoryId+"&methodName=category.detailList" 
    }).then(function mySucces(response) { 
    if(response.data.responseMsg.resultLength == 0) { 
     $ionicLoading.hide(); 
     $scope.categoryDetailList = response.data.responseMsg.category; 
     $scope.emptyCategory = true; 
    } else { 
     $ionicLoading.hide(); 

     $scope.categoryDetailList = response.data.responseMsg.category; 
     //$scope.advertiseDetailList = response.data.responseMsg.advertise; 
     $scope.$watch('learnSpeed', function (newValue, oldValue) { 
     $ionicSlideBoxDelegate.update(); 
     }); 

     angular.forEach(response.data.responseMsg.advertise, function(value, key) { 
     $scope.advertiseDetailList.push({'image': value.image}); 
     }) 

     $scope.emptyCategory = false; 
    } 
    }); 

    $scope.getcategoryDeail = function(detailsId) { 
    $state.go('app.categoryDetail',{detailsId:detailsId}); 
    } 

})

服務器響應：

"responseMsg": { 

    - 
    "0": { 
     "id": 1, 
     "imgContent": "images/1.jpeg", 
     "profileId": 9, 
     "image": "http://localhost/helloKasaragodApi/static/images/1.jpeg" 
    }, 
    - 
    "1": { 
     "id": 2, 
     "imgContent": "images/2.jpeg", 
     "profileId": 16, 
     "image": "http://localhost/helloKasaragodApi/static/images/2.jpeg" 
    }, 
    - 
    "2": { 
     "id": 3, 
     "imgContent": "images/3.jpeg", 
     "profileId": 33, 
     "image": "http://localhost/helloKasaragodApi/static/images/3.jpeg" 
    } 

},

來源

2017-01-24 Santhosh K N

之後你從服務器獲取數據，並把它添加到你想要使用$scope.$apply();更新$scope變量頁面上的變量。

來源

2017-01-24 14:35:34

沒有它不工作 –

你對你的應用程序的$ stateProvider禁用緩存？ –

號的應用程序，js代碼的.config（函數（$ stateProvider，$ urlRouterProvider）{$ stateProvider .STATE（ '應用'，{ URL： '/應用程序'，摘要：真實， templateUrl：「模板/menu.html ' 控制器： 'AppCtrl' }） .STATE（ 'app.home'，{ URL： '/家'，觀點：{ 'menuContent'：{ templateUrl：' 模板/home.html'，控制器：'HomeCtrl' } } }） ......等等 –

可以使用離子像幻燈片方式如下：

<ion-slide ng-repeat="artist in data.random_artists"> 
<div class="box"> 
    {{artist.title}} 
</div> 
</ion-slide> 

.controller('HomeCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate, DataHandler) { 
$scope.data.random_artists = DataHandler.GetRandomArtists(3); 
    setTimeout(function(){ 
     $ionicSlideBoxDelegate.update(); 
    },5000); 
}

編號：https://forum.ionicframework.com/t/slides-generated-with-ng-repeat-causing-issues-slide-box/394/15

來源

2017-10-05 07:19:01

當html頁面加載第一次離子滑塊不起作用

回答

相關問題