Question

我遇到了一个非常奇怪的问题。有一个离子滑动盒包含一些内部图像：

<ion-view >
    <ion-content overflow-scroll="false" >
      <ion-slide-box show-pager="true">
        <ion-slide ng-repeat="item in featured">
          <img class="featured-image" ng-src="{{item.thumbnail}}" alt="" />
        </ion-slide>
      </ion-slide-box>
    </ion-content>
 </ion-view>

首次显示该页面时，幻灯片框为空，尽管在我的浏览器检查器中似乎是正确的。虽然我浏览器的检查器中的数据是相同的，但在我调整浏览器大小时会出现图像。这意味着它与我的数据无关。可能是什么原因？

顺便说一句，我的控制器是这样的：

(function() {
  'use strict';

  angular
    .module('app')
    .controller('MyController', MyController);

  MyController.$inject = ['$scope','$state','MySvc'];

  function MyController($scope, $state ,MySvc) {

    $scope.featured = [];

    loadFeatured();

    function loadFeatured() {

      MySvc.getFeatured(function(success, data) {
        if ( success ) {
          $scope.featured = data;
          //console.log($scope.featured);
        } else {
          alert(error.message);
        }
      });
    }

有什么想法吗？感谢

Answer 1

我通过更改控制器代码修复了问题：

function loadFeatured() {

      MySvc.getFeatured(function(success, data) {
        if ( success ) {
          $scope.featured = data;
          setTimeout(function() {
                $ionicSlideBoxDelegate.slide(0);
                $ionicSlideBoxDelegate.update();
                $scope.$apply();
                });
        } else {
          alert(error.message);
        }
      });
    }

在页面调整大小之前，图像未显示的离子滑动框

1 个答案: