angularjs – 强制ng-src重新加载

发布时间：2020-12-17 09:05:12 所属栏目：安全来源：网络整理

导读：当图像的URL没有改变，但是它的内容有没有改变时，如何强制angularjs使用ng-src属性重新加载图像？ div ng-controller='ctrl' img ng-src="{{urlprofilephoto}}"/div 执行文件上传的uploadReplace服务会替换图片的内容，而不是网址。 app.factory('R4aFact',

当图像的URL没有改变，但是它的内容有没有改变时，如何强制angularjs使用ng-src属性重新加载图像？

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

执行文件上传的uploadReplace服务会替换图片的内容，而不是网址。

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',function ($scope) {
    $scope.app = {
        imageUrl: "http://example.com/img.png"
    };
    var random = (new Date()).toString();
    $scope.imageSource = $scope.app.imageUrl + "?cb=" + random;
}]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!