ion-slide-box更新问题

时间:2015-07-14 09:12:35

标签: ionic-framework ionic

<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。

1 个答案:

答案 0 :(得分:5)

编辑事实上,这似乎是一个已知问题,如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;
}