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>
and my controller:
$scope.changeItem = function(differentItem) {
$scope.item = differentItem;
//$scope.$apply();
$ionicSlideBoxDelegate.update();
};
Clicking the changeItem () button changes the value of $ scope.item which I am using in the ng-repeat (in the slide).
My problem is $ionicSlideBoxDelegate.update();
not updating and setting the pager index to 0 with the new number of images of the selected item, even if the $ scope.item variable changes.
source to share
edit: Indeed, this seems to be a known issue as noted on the official Ia forum . However, I made an example of how it works, as you can see here . The things I changed are as follows:
- I updated the ionic version to 1.0.1 (you can see the links from http://code.ionicframework.com/ )
- used
$ionicSlideBoxDelegate.slide(0);
because otherwise it doesn't work again if you press the button when on the last image - used
$ionicSlideBoxDelegate.update()
as you tried, but internally$timeout
since (as you will read on the forum) it may be that the items are not showing yet when you call the methodupdate()
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 -
I made a test project on CodePen , and as you can see, change images
on object updates item
accordingly.
So, without seeing the rest of your code, we cannot help. You can do a similar CodePen example with your code so we can see at a glance what might be wrong.
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>
source to share