$ cordovaFile nicht gut mit dem Cache-ionischer was zeigt falsches Bild

Question

Szenario Nach

1. gehen main.admin.emergencyDetail.photos
2. Laden jedes Bild und zeigt als Listenansicht
3. klicken ein Bild in der Liste ein eröffnet modal, die mit ionischen Schieber ermöglicht durch die Bildliste
4. geht zurück auf main.admin.emergencyDetail
5. geht zurück auf main.admin und die Wahl eines neuen EmergenC zu gleiten y aus einer Liste (gehe zu einer anderen main.admin.emergencyDetail.photos
6. ein Foto aus der Liste öffnen, um in modal zu zeigen: Nun werden die alten Bilder von letzter Zeit in dieser Ansicht angezeigt und von nun an nur noch die von Punkt 3. geladenen main.admin.emergencyDetail.photos Zustand
7. App schließen und erneut öffnen ermöglicht es mir, diesen Fehler zurückzusetzen. sobald ich auf dem Punkt am 3. dauert es wieder dieses Bild, das ich jetzt in jedem main.admin.emergencyDetail.photos Zustand geöffnet

Das Komische ist: wenn ich das Dateisystem geprüft file:///data/data/<appname>/cache dann wurde der photoCache Ordner gelöscht erfolgreich von einem Zustand zurück (wie ich in 4.), was bedeutet, dass das alte Bild irgendwie von ionischen zwischengespeichert wird. Ich glaube, ich kann irgendwo window.cache.clear() setzen, aber bin mir nicht ganz sicher, wo ....

'use strict'; 
angular.module('main') 
.controller('AdminEmergencyCtrl', function (Action, $window, $state, $ionicSideMenuDelegate, 
              $location, $rootScope, $ionicHistory, $timeout, 
              Rest, $stateParams, $log, uiGmapGoogleMapApi, 
              $mdToast, $ionicPopup, $ionicModal, $scope, 
              $ionicSlideBoxDelegate, $cordovaFile, $q) { 
// Authenticate 
($rootScope.authenticated.state && 
$rootScope.authenticated.type === 'Admin') ? '' : $location.url('main/inactive'); 

$log.log('Hello from your Controller: AdminEmergencyCtrl in module main:. This is your controller:', this); 

// Settings 
$rootScope.$broadcast('checkMenuButton', {}); 
$ionicSideMenuDelegate.canDragContent(true); 
$scope.$on('$ionicView.leave', function (scopes, states) { 
    document.addEventListener('deviceready', function() { 
    $cordovaFile.removeRecursively(cordova.file.cacheDirectory, 'photoCache') 
     .then(function (success) { 
     $log.log('($ionicView.leave) cacheDirectory/photoCache cleared'); 
     }, function (error) { 
     $log.log('($ionicView.leave) cacheDirectory/photoCache clearing error:'); 
     $log.log(error); 
     }); 
    }, false); 
}); 

// Initialize values 
var ctrl = this; 
ctrl.emergency = {}; 

ctrl.currentUser = Action.getDeviceID(); 
ctrl.map = {}; 
ctrl.showMap = ($ionicHistory.currentStateName() === 'main.admin.emergencyDetail'); 
$scope.$on('$ionicView.enter', function (scopes, sates) { 
    // reassign boolean to prevent strange loading behaviour of google maps 
    ctrl.showMap = ($ionicHistory.currentStateName() === 'main.admin.emergencyDetail'); 
}); 
ctrl.assigned = null; 

ctrl.hasImages = false; 
ctrl.isLoading = true; 
$scope.images = []; 
ctrl.marker = {}; 

// Functions declarations 
ctrl.getEmergency = function() { 
    Rest.getEmergency($stateParams.id, 
    function (success) { 
     var data = angular.fromJson(success); 
     var lat = data.Lat; 
     var long = data.Long; 
     ctrl.emergency = data; 
     ctrl.assigned = data.HandledByID; 
     ctrl.map = {center: {latitude: lat, longitude: long}, zoom: 15}; 
     ctrl.marker = { 
     id: 0, 
     coords: {latitude: lat, longitude: long} 
     }; 
     ctrl.showMap = true; 
    }, 
    function (error) { 
     $log.log(error); 
    }); 
}; 

/** 
* Folder creating -> Files creating -> writing in files -> returning promise for further handling 
* 
* @returns {Promise} 
*/ 
ctrl.fillTempFolder = function() { 
    return $q(function (resolve, reject) { 
    resolve(fillTempFolderSuccess()); 
    }); 
}; 

function fillTempFolderSuccess() { 
    $log.log('AM IN ctrl.fillTempFolder'); 
    document.addEventListener('deviceready', function() { 
    $cordovaFile.createDir(cordova.file.cacheDirectory, 'photoCache', true) 
     .then(function (success) { 
     $log.log('AM IN $cordovaFile.createDir'); 
     $scope.images.forEach(function (item) { 
      var blob = new Blob([Action.convertDataURIToBinary(item.src)], {type: 'image/jpg'}); 
      $cordovaFile.createFile(cordova.file.cacheDirectory + 'photoCache/', item.name, true).then(
      function (success) { 
       $log.log('(CREATE FILE) Success'); 
       $cordovaFile.writeFile(cordova.file.cacheDirectory + 'photoCache/', item.name, blob, true) 
       .then(function (success) { 
        $log.log('(WRITE FILE) Success'); 
       }, function (error) { 
        $log.log('(WRITE FILE) Error'); 
        $log.log(error); 
       }); 
      }, 
      function (error) { 
       $log.log('(CREATE FILE) Error'); 
       $log.log(error); 
      } 
     ); 
     }); 
     }, function (error) { 
     $log.log('(CREATE DIR) Could not write to FileSystem'); 
     }); 
    }, false); 
} 

ctrl.loadPictures = function (lastPic) { 
    Rest.getNextPicture($stateParams.id, lastPic, 
    function (success) { 
     var data = angular.fromJson(success); 
     var item = {src: 'data:image/jpg;base64,' + data.Data, name: data.Pic}; 
     $scope.images.push(item); 
     $log.log('pic loaded: ' + data.Pic); 
     ctrl.hasImages = true; 
     ctrl.loadPictures(data.Pic); 
    }, 
    function (error) { 
     ctrl.isLoading = false; 
     $log.log(cordova.file.cacheDirectory + 'photoCache/'); 
     ctrl.fillTempFolder().then(function (success) { 
     $timeout(function() { 
      $log.log('CREATING MODAL'); 
      $scope.modal = $ionicModal.fromTemplate(
      '<div class="modal image-modal transparent" ng-click="closeModal()">' + 
      '<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false">' + 
      '<ion-slide ng-repeat="oImage in images">' + 
      '<img ng-src="' + cordova.file.cacheDirectory + 'photoCache/{{oImage.name}}" class="fullscreen-image" />' + 
      '</ion-slide>' + 
      '</ion-slide-box>' + 
      '</div>', { 
       scope: $scope, 
       animation: 'slide-in-up' 
      }); 
     }, 3000); 
     }); 
    } 
); 
}; 

ctrl.showPicturesPage = function() { 
    $state.go('main.admin.emergencyDetail.photos', {'id': $stateParams.id}); 
}; 

$scope.openModal = function() { 
    $ionicSlideBoxDelegate.slide(0); 
    $scope.modal.show(); 
}; 

$scope.closeModal = function() { 
    $scope.modal.hide(); 
}; 

// Called each time the slide changes 
$scope.slideChanged = function (index) { 
    $scope.slideIndex = index; 
}; 

// Cleanup the modal when we're done with it! 
$scope.$on('$destroy', function() { 
    $scope.modal.remove(); 
}); 

// Call this functions if you need to manually control the slides 
$scope.next = function() { 
    $ionicSlideBoxDelegate.next(); 
}; 

$scope.previous = function() { 
    $ionicSlideBoxDelegate.previous(); 
}; 

$scope.goToSlide = function (index) { 
    $scope.modal.show(); 
    $ionicSlideBoxDelegate.slide(index); 
}; 

// Called each time the slide changes 
$scope.slideChanged = function (index) { 
    $scope.slideIndex = index; 
}; 

// Functions run 
if ($ionicHistory.currentStateName() === 'main.admin.emergencyDetail') { 
    ctrl.getEmergency(); 
} else { 
    ctrl.loadPictures(''); 
} 
}); 

Answer 1

ich mein Problem gelöst durch einen Zeitstempel in dem ng-src Pfad hinzufügen.

Quelle: Stackoverflow - forcing a ng-src reload