强制NG-SRC重装 [英] Forcing a ng-src reload

问题描述

我怎么可以强制angularjs与NG-src属性，当图像的URL没有更改，重新加载图像，但它的内容有？

 ＆LT; D​​IV NG控制器='CTRL'＆GT;
    ＆LT; IMG NG-SRC ={{urlprofilephoto}}＆GT;
＆LT; / DIV＆GT;
 

执行文件上传uploadReplace服务，正在取代图像的内容，而不是网址。

  app.factory（'R4aFact'，['$ HTTP，$ Q'，'$路线'，'$窗口'，'$ rootScope'，
功能（$ HTTP，$ Q $路径，$窗口，$ rootScope）{
    返回{
        uploadReplace：功能（imgfile，提供ProfileID）{
            VAR XHR =新XMLHtt prequest（）
                FD =新FORMDATA（）
                D = $ q.defer（）;
            fd.append（'提供ProfileID'，提供ProfileID）;
            fd.append（FILEDATA，imgfile）;
            xhr.onload =功能（EV）{
                VAR数据= JSON.parse（this.responseText）;
                $ rootScope。$应用（函数（）{
                    如果（data.status =='OK'）{
                        d.resolve（数据）;
                    }其他{
                        d.reject（数据）;
                    }
                }）;
            }
            xhr.open（'后'，'/型材/ replacePhoto'，真）
            xhr.send（FD）
            返回d.promise;
        }
    }
}]）;
 

当uploadReplace回报，我不知道我怎么能强迫图像刷新

  app.controller（'CTRL'，['$范围，R4aFact'，函数（$范围，R4aFact）{
    $ scope.clickReplace =功能（）{
        R4aFact.uploadReplace（$ scope.imgfile，$ scope.pid）。然后（函数（）{
            //？在这里我需要强制重新加载imgsrc
        }）
    }
}]）
 

解决方案

这是简单的方法就是添加了独特的时间戳NG-SRC强制形象重装如下：

  $范围。$应用（函数（）{
    $ scope.imageUrl = $ scope.imageUrl +'？ +新的Date（）的getTime（）。
}）;
 

或

  angular.module（'ngSrcDemo'，[]）
    .controller（'AppCtrl'，['$范围'，函数（$范围）{
    $ scope.app = {
        图片网址：http://example.com/img.png
    };
    VAR随机=（新的Date（））的toString（）。
    $ scope.imageSource = $ scope.app.imageUrl + +随机CB =？;
}]）;
 

How can I force angularjs to reload an image with an ng-src attribute, when the url of the image has not changed, but its contents has?

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

An uploadReplace service that performs a file upload, is replacing the content of the image, but not the 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;
        }
    }
}]);

When the uploadReplace returns, I don't know how I can force the image to reload

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 
        })
    }
}])

解决方案

An easy workaround is to append a unique timestamp to ng-src to force image reload as follows:

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

or

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;
}]);

这篇关于强制NG-SRC重装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！