Question

页面加载时，我的离子滑动框不起作用。如果我刷新页面然后它正常工作。我引用了一些链接，但无法解决这个问题。请帮帮我。

我的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"
    }

},

Answer 1

从服务器获取数据并将其添加到您想要的变量后，使用;更新页面上的$scope.$apply();变量。

Answer 2

您可以使用以下方式使用离子幻灯片：

<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://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/499413/chrome-linux.zip

当html页面第一次加载时，离子滑动框不起作用

2 个答案: