Принуждение перезагрузки ng-src

Question

Как заставить angularjs перезагружать изображение атрибутом ng-src, когда URL-адрес изображения не изменился, но его содержимое имеет?

<div ng-controller='ctrl'> 
    <img ng-src="{{urlprofilephoto}}"> 
</div> 

услуга uploadReplace, которая выполняет загрузку файла, заменяет содержимое изображения, но не в URL.

app.factory('R4aFact', ['$http', '$q', '$route', '$window', '$rootScope', 
function($http, $q, $route, $window, $rootScope) { 
    return { 
     uploadReplace: function(imgfile, profileid) { 
      var xhr = new XMLHttpRequest(), 
       fd = new FormData(), 
       d = $q.defer(); 
      fd.append('profileid', profileid); 
      fd.append('filedata', imgfile); 
      xhr.onload = function(ev) { 
       var data = JSON.parse(this.responseText); 
       $rootScope.$apply(function(){ 
        if (data.status == 'OK') { 
         d.resolve(data); 
        } else { 
         d.reject(data); 
        } 
       }); 
      } 
      xhr.open('post', '/profile/replacePhoto', true) 
      xhr.send(fd) 
      return d.promise; 
     } 
    } 
}]); 

Когда uploadReplace возвращается, я не знаю, как я могу заставить изображение перезагрузить

app.controller('ctrl', ['$scope', 'R4aFact', function($scope, R4aFact){ 
    $scope.clickReplace = function() { 
     R4aFact.uploadReplace($scope.imgfile, $scope.pid).then(function(){ 
      // ?? here I need to force to reload the imgsrc 
     }) 
    } 
}]) 

Answer 1

Try This

app.controller('ctrl', ['$scope', 'R4aFact', function($scope, R4aFact){ 
$scope.clickReplace = function() { 
    R4aFact.uploadReplace($scope.imgfile, $scope.pid).then(function(response){ 
     $scope.urlprofilephoto = response + "?" + new Date().getTime(); //here response is ur image name with path. 
    }); 
} 
}]) 

Answer 2

Возможно, это может быть столь же просто, как добавление строка запроса decache на URL-адрес изображения? то есть.

var imageUrl = 'http://i.imgur.com/SVFyXFX.jpg'; 
$scope.decachedImageUrl = imageUrl + '?decache=' + Math.random(); 

Это должно заставить его перезагрузить.

Answer 3

простой обходной путь, чтобы добавить уникальную метку времени нг-Src, чтобы заставить перезаряжает изображения следующим образом:

$scope.$apply(function() { 
    $scope.imageUrl = $scope.imageUrl + '?' + new Date().getTime(); 
}); 

или

angular.module('ngSrcDemo', []) 
    .controller('AppCtrl', ['$scope', function ($scope) { 
    $scope.app = { 
     imageUrl: "http://example.com/img.png" 
    }; 
    var random = (new Date()).toString(); 
    $scope.imageSource = $scope.app.imageUrl + "?cb=" + random; 
}]); 

Answer 4

«угловой подход» может быть создать свой собственный фильтр для добавления к URL изображения случайного параметра запроса.

Что-то вроде этого:

.filter("randomSrc", function() { 
 
    return function (input) { 
 
     if (input) { 
 
      var sep = input.indexOf("?") != -1 ? "&" : "?"; 
 
      return input + sep + "r=" + Math.round(Math.random() * 999999); 
 
     } 
 
    } 
 
})

Затем вы можете использовать его как это:

<img ng-src="{{yourImageUrl | randomSrc}}" />

Answer 5

я прибегал, чтобы сделать директиву т o введите случайный параметр в src, но только в том случае, если изображение изменится, поэтому я не слишком много разбираюсь в кешировании.

Я использую его для обновления профиля пользователя pic в навигационной панели, когда они обновляют его через AJAX, чего не так часто бывает.

(function() { 
 
    "use strict"; 
 

 
    angular 
 
    .module("exampleApp", []) 
 
    .directive("eaImgSrc", directiveConstructor); 
 

 
    function directiveConstructor() { 
 
    return { link: link }; 
 

 
    function link(scope, element, attrs) { 
 
     scope.$watch(attrs.eaImgSrc, function(currentSrc, oldSrc) { 
 
     if (currentSrc) { 
 
      // check currentSrc is not a data url, 
 
      // since you can't append a param to that 
 
      if (oldSrc && !currentSrc.match(/^data/)) { 
 
      setSrc(currentSrc + "?=" + new Date().getTime()); 
 
      } else { 
 
      setSrc(currentSrc); 
 
      } 
 
     } else { 
 
      setSrc(null); 
 
     } 
 
     }) 
 

 
     function setSrc(src) { element[0].src = src; } 
 
    } 
 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="exampleApp"> 
 
    <div> 
 
    <img ea-img-src="src"></img> 
 
    </div> 
 

 
    <button ng-click="src = 'http://placehold.it/100x100/FF0000'">IMG 1</button> 
 
    <button ng-click="src = 'http://placehold.it/100x100/0000FF'">IMG 2</button> 
 
    <button ng-click="src = 'http://placehold.it/100x100/00FF00'">IMG 3</button> 
 
</div>