Question

<ion-slide-box>
     <ion-slide ng-repeat="imageUrl in item.images">
              <img ng-src="{{imageUrl}}" />
      </ion-slide>
</ion-slide-box>

和我的控制器：

$scope.changeItem = function(differentItem) {
        $scope.item = differentItem;
        //$scope.$apply();
        $ionicSlideBoxDelegate.update();
    };

每当点击changeItem（）按钮时，它会改变我在ng-repeat中使用的$ scope.item（在幻灯片框中）。

我的问题是，即使$ scope.item发生更改，$ionicSlideBoxDelegate.update();也不会使用所选项目的新图像数量更新并将寻呼机索引设置为0。

Answer 1

编辑事实上，这似乎是一个已知问题，如official Ionic forum所述。但是，我让示例正常工作，您可以看到here。我改变的事情如下：

我将离子更新为版本1.0.1（您可以看到http://code.ionicframework.com/）
使用了$ionicSlideBoxDelegate.slide(0);，因为如果您在最后一张图片上点击按钮，它会再次失败
在您尝试时使用了$ionicSlideBoxDelegate.update()，但是在$timeout之内（正如您将在论坛上阅读的那样），当您调用{{1}时，可能是项目尚未呈现update();

更新了代码，供参考：

$ionicSlideBoxDelegate

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $http, $ionicSlideBoxDelegate, $timeout) {
  $scope.item = {};

	$scope.item.images = [
		'http://lorempixel.com/400/200/',
		'http://lorempixel.com/400/300/',
		'http://lorempixel.com/400/400/',
	];


	$scope.changeImages = function(){
		$ionicSlideBoxDelegate.slide(0);
    
    $scope.item.images = [
			'http://lorempixel.com/200/200/',
			'http://lorempixel.com/300/300/'
		];
    
    $timeout(function(){
     $ionicSlideBoxDelegate.update(); 
    }, 500);
      
	};
});

- 编辑结束 -

我在CodePen上创建了一个测试项目，正如您所看到的，更改<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic Template</title> <link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script> </head> <body ng-controller="MyCtrl"> <ion-slide-box show-pager="true"> <ion-slide ng-repeat="imageUrl in item.images track by $index"> <img ng-src="{{imageUrl}}" /> <button class="button" ng-click="changeImages()">change imgs</button> </ion-slide> </ion-slide-box> </body> </html>对象上的images会相应更新。

因此，在没有看到其余代码的情况下，我们无法提供帮助。您可以使用代码制作类似的CodePen示例，以便我们可以立即看到它可能出现的问题。

此处粘贴的代码仅供参考：

item

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $http) {
  $scope.item = {};

	$scope.item.images = [
		'http://lorempixel.com/400/200/',
		'http://lorempixel.com/400/300/',
		'http://lorempixel.com/400/400/',
	];


	$scope.changeImages = function(){
		$scope.item.images = [
			'http://lorempixel.com/200/200/',
			'http://lorempixel.com/300/300/',
			'http://lorempixel.com/500/400/',
		];		
	};
});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

ion-slide-box更新问题

1 个答案: