强制一个ng-src重新加载
如何强制angularjs重新加载一个ng-src属性的图像，当图像的url没有改变，但其内容有？
<div ng-controller='ctrl'> <img ng-src="{{urlprofilephoto}}"> </div> 执行file upload的uploadReplace服务正在replace图像的内容，而不是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 }) } }])
一个简单的解决方法是追加一个唯一的时间戳ng-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; }]);
也许它可以像向图像url添加一个decache查询string一样简单？ 即。
var imageUrl = 'http://i.imgur.com/SVFyXFX.jpg'; $scope.decachedImageUrl = imageUrl + '?decache=' + Math.random();
这应该强制它重新加载。
一个“angular度的方法”可能是创build你自己的filter来添加一个随机查询string参数的图像URL。
像这样的东西：
.filter("randomSrc", function () { return function (input) { if (input) { var sep = input.indexOf("?") != -1 ? "&" : "?"; return input + sep + "r=" + Math.round(Math.random() * 999999); } } })
尝试这个
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. }); } }])
我采取了一个指令，把随机的参数放在src中，但是只有当图像发生变化的时候，我才不会因为caching而弄得这么糟糕。
我用它来更新导航栏中用户的个人资料图片，当他们更新通过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>
