javascript 在 Angular 中重新加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28013128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload image in Angular
提问by Andrei
I'm trying to reload an image from my webserver every n seconds. The code below drags the new picture, but it doesn't replace the old one in the client. Where is my mistake?
我正在尝试每 n 秒从我的网络服务器重新加载图像。下面的代码拖动新图片，但它不会替换客户端中的旧图片。我的错误在哪里？
<div ng-app="refresh-div" ng-controller="refresh_control">
<img ng-src="{{imageUrl}}" />
</div>
<script>
var app = angular.module('refresh-div', [])
.controller('refresh_control', function ($scope, $http, $timeout) {
$scope.imageURL = 'assets/now.png?_ts=' + new Date().getTime();
$scope.getData = function () {
$http.get($scope.imageURL, {
cache: false
}).success(function (data, status, headers, config) {
$scope.image = data;
$scope.imageUrl = "http://mywebsite/assets/now.png";
});
};
$scope.intervalFunction = function () {
$timeout(function () {
$scope.getData();
$scope.intervalFunction();
}, 1500)
};
$scope.intervalFunction();
});
</script>
采纳答案by Andrei
Fixed the problem, the issue was that $scope.imageURL = 'http://mywebsite/assets/now.png?_ts=' + new Date().getTime(); was missing from the success function. Basically, I needed to updated the url of the image. I'm not sure if it is the best solution, but it is working for my requirements.
修复了问题，问题是 $scope.imageURL = ' http://mywebsite/assets/now.png?_ts=' + new Date().getTime(); 成功函数中缺少。基本上，我需要更新图像的 url。我不确定这是否是最好的解决方案，但它符合我的要求。
<div ng-app="refresh-div" ng-controller="refresh_control">
<img ng-src="{{imageURL}}" />
</div>
<script>
var app = angular.module('refresh-div', [])
.controller('refresh_control', function ($scope, $http, $timeout) {
$scope.imageURL = 'http://mywebsite/assets/now.png?_ts=' + new Date().getTime();
$scope.getImage = function () {
$http.get($scope.imageURL, {
cache: false
}).success(function (data, status, headers, config) {
$scope.imageURL = 'http://mywebsite/assets/now.png?_ts=' + new Date().getTime();
});
};
$scope.intervalFunction = function () {
$timeout(function () {
$scope.getImage();
$scope.intervalFunction();
}, 1500)
};
$scope.intervalFunction();
});
</script>
回答by kostik
a) <img ng-src="{{imageUrl}}" />- it force Angular.js watch the changes of the value of $scope.imageUrl. When this value changed Angular update image.
a) <img ng-src="{{imageUrl}}" />- 它强制 Angular.js 观察 $scope.imageUrl 值的变化。当这个值改变 Angular 更新图像时。
b)
b)
$scope.getData = function () {
$http.get($scope.imageURL, {
cache: false
})
.success(function (data, status, headers, config) {
$scope.image = data;
$scope.imageUrl = "http://mywebsite/assets/now.png"; // <== this line
});
This line $scope.imageUrl = "http://mywebsite/assets/now.png";always set the same value for $scope.imageUrl. In result there is no updates.
此行$scope.imageUrl = "http://mywebsite/assets/now.png";始终为 设置相同的值$scope.imageUrl。结果没有更新。
Maybe this code
也许这个代码
$scope.intervalFunction = function () {
$timeout(function () {
$scope.imageURL = 'assets/now.png?_ts=' + new Date().getTime();
}, 1500);
};
makes more sense?
更有意义？
