ion-slide-box issues with modal in Ionic App - html

Question

I am using ion-slider to show images and after clicking slide image get show full Image in ion-slider to sliding full image.
But I have problem when I back directly first full image to home screen then slider not working.
I have used following views and controllers.
Home Template View :
<ion-view view-title="Home">
<ion-content>
<div class="padding">
<ion-slide-box>
<ion-slide ng-repeat="Image in gallery" ng-click="showImages($index)" repeat-done="repeatDone()">
<img data-ng-src="{{sdcardpath}}{{Image.Path}}" width="100%"/>
<ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
Controller :
.controller('HomeController', function($scope,$cordovaFile,$ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicPopup, $timeout) {
$scope.sdcardpath = cordova.file.externalRootDirectory + foldername;
$scope.gallery = [
{ Path: 'img1.png' },
{ Path: 'img2.png' },
{ Path: 'img3.png' },
];
$scope.repeatDone = function() {
$ionicSlideBoxDelegate.update();
};
/*
* Show Full Screen Sliding Gallery Images
*/
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/image-popover.html');
};
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
};
$scope.zoomMin = 1;
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$timeout(function(){
$ionicSlideBoxDelegate.enableSlide(true);
});
} else {
$timeout(function(){
$ionicSlideBoxDelegate.enableSlide(false);
});
}
};
}
Modal View : image-popover.html
<div class="modal image-modal">
<ion-slide-box active-slide="activeSlide" show-pager="false">
<ion-slide ng-repeat="Images in gallery">
<ion-scroll direction="xy" locking="false" scrollbar-x="false" scrollbar-y="false"
zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%"
delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)" on-release="updateSlideStatus(activeSlide)">
<img data-ng-src="{{sdcardpath}}{{Images.Path}}" width="100%"/>
</ion-scroll>
</ion-slide>
</ion-slide-box>
</div>
And Directive : repeatDone
.directive('repeatDone', function () {
return function (scope, element, attrs) {
if (scope.$last) { // all are rendered
scope.$eval(attrs.repeatDone);
}
}
So please help to solve this issues.

Answer 1

I got solution by some changes in Controller.
Controller
.controller('HomeController', function($scope,$cordovaFile,$ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicPopup, $timeout) {
$scope.sdcardpath = cordova.file.externalRootDirectory + foldername;
$scope.gallery = [
{ Path: 'img1.png' },
{ Path: 'img2.png' },
{ Path: 'img3.png' },
];
$scope.repeatDone = function() {
$ionicSlideBoxDelegate.update();
};
/*
* Show Full Screen Sliding Gallery Images
*/
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/image-popover.html');
};
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
$ionicSlideBoxDelegate.enableSlide(true);
$ionicSlideBoxDelegate.update();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
$ionicSlideBoxDelegate.enableSlide(true);
$ionicSlideBoxDelegate.update();
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
$ionicSlideBoxDelegate.enableSlide(true);
$ionicSlideBoxDelegate.update();
});
$scope.zoomMin = 1;
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$timeout(function(){
$ionicSlideBoxDelegate.enableSlide(true);
});
} else {
$timeout(function(){
$ionicSlideBoxDelegate.enableSlide(false);
});
}
};
}