ion-slide-box更新问题 [英] ion-slide-box Update Issue
问题描述
<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-中使用的$ scope.item重复（在幻灯片框中）。
Whenever the changeItem() button is clicked, it changes $scope.item which i use in ng-repeat(in slide-box).
我的问题是 $ ionicSlideBoxDelegate.update（）; doesn' t更新并使用所选项目的新图像数量将寻呼机索引设置为0，即使$ scope.item发生更改。
My problem here is that $ionicSlideBoxDelegate.update(); doesn't update and set the pager index to 0 with the new number of images of the selected item even though the $scope.item changes.
推荐答案
编辑事实上，这似乎是一个已知问题，如官方离子论坛。但是，我让这个示例正常工作，你可以看到这里。我改变的事情如下：
edit: Indeed, this seems like a known issue, as noted on the official Ionic forum. However, I made the example work as you can see here. Things I've changed are the following:
- 我将离子更新为版本1.0.1（你可以看到来自 http://code.ionicframework.com/ ）
- 使用
$ ionicSlideBoxDelegate.slide（0）;因为如果你在最后一张图片上点击按钮会再次失败 - 使用
$ ionicSlideBoxDelegate.update（）在你尝试的时候，但在$ timeout里面（正如你将在论坛上看到的那样）它可能是在$ ionicSlideBoxDelegate; $上调用
update（）方法时，项目尚未呈现b $ b - I updated the ionic to version 1.0.1 (you can see the links from http://code.ionicframework.com/)
- used the
$ionicSlideBoxDelegate.slide(0);because it otherwise fails again if you click the button when on the last image - used the
$ionicSlideBoxDelegate.update()as you were trying, but inside the$timeoutsince (as you will read on forum) it could be that the items are not yet rendered when you call theupdate()method on$ionicSlideBoxDelegate;
更新后的代码，供参考：
Updated code, here for reference:
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);
};
});
<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>
--edit end -
我在 CodePen ，正如您所看到的，更改项上的图像对象更新相应。
I made a test project on CodePen, and as you can see, changing the images on the item object updates accordingly.
因此，在没有看到其余代码的情况下，我们无法提供帮助。您可以使用代码制作类似的CodePen示例，以便我们可以立即看到它可能出现的问题。
So, without seeing the rest of your code, we can't help. You can make a similar CodePen example with your code, so that we can see immediately what may be wrong with it.
此处粘贴代码以供参考：
Code pasted here for reference:
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;
}
<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/0.9.25/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.25/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar title="myTitle"></ion-header-bar>
<ion-pane class="has-header" padding="true">
<h2>You can't see me</h2>
</ion-pane>
</body>
</html>
这篇关于ion-slide-box更新问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
