javascript 图像未在 Angular 中使用 ng-src 更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15793027/
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
image not updating using ng-src in Angular
提问by Ronnie
In my controller, I call a service. This service makes a request to a PHP file that gives me a URL to an image.
在我的控制器中，我调用了一个服务。此服务向 PHP 文件发出请求，该文件为我提供了图像的 URL。
The reason for this is the image resides inside a "Media Vault" meaning I need to generate a hashed URL like so in order to view it:
这样做的原因是图像驻留在“媒体库”中，这意味着我需要像这样生成散列 URL 才能查看它：
http://xxxx.vo.llnwd.net/o35/s/xxx/test/thumbs/slide1.jpg?e=1365006137&h=5852aeaf5beeeebff05a601801b61568
http://xxxx.vo.llnwd.net/o35/s/xxx/test/thumbs/slide1.jpg?e=1365006137&h=5852aeaf5beeeebff05a601801b61568
The URL above has already expired so you won't see anything from that specific link.
上面的 URL 已经过期，因此您将看不到该特定链接中的任何内容。
My image tag is like so:
我的图片标签是这样的：
<img id="thumbnail" class="glow" ng-src="{{currentThumb}}" width="200" height="150"/>
<img id="thumbnail" class="glow" ng-src="{{currentThumb}}" width="200" height="150"/>
currentThumb in my controller is:
我的控制器中的 currentThumb 是：
$scope.currentThumb = ImageService.getImage({
'type' : 'thumb',
'index' : $scope.currentIndex + 1,
'location' : $scope.location
});
and my service looks like this:
我的服务如下所示：
app.factory('ImageService', function($http)
{
var image = null;
return {
promise:null,
getImage: function($data)
{
this.promise = $http.post('resources/auth.php',$data, {timeout:20000}).success(function(response)
{
image = response;
log(response);
})
}
}
});
The current ImageService successfully returns a URL (at least it shows the url in the console) and when clicking the log result in the console, the image loads fine. Any reason why the image isn't updating?
当前 ImageService 成功返回一个 URL（至少它在控制台中显示了 url）并且当在控制台中单击日志结果时，图像加载正常。图像不更新的任何原因？
采纳答案by Justen
I'm not sure how you need to call this, but another way that might be better is to call that ImageService.getImage()in a resolve block of the controller. That way its all loaded before the controller and view taken care of.
我不确定您需要如何调用它，但另一种可能更好的方法是ImageService.getImage()在控制器的解析块中调用它。这样它在控制器和视图之前都加载了。
jsfiddle
提琴手
view
看法
<div ng-app="main">
<div ng-controller="ExampleController">
<h1>currentThumb</h1>
<img ng-src="{{currentThumb.data}}">
</div>
</div>
code
代码
var app = angular.module('main',[]);
app.factory('ImageService', function($http)
{
image = null;
return {
getImage: function($data)
{
image = $http.post('http://dopserv1.dop.com/test/auth.php', $data, {timeout:20000})
return image
}
}
});
function ExampleController($scope, ImageService)
{
$scope.currentThumb = ImageService.getImage({
'type' : 'thumb',
'index' : 1,
'location' : 'http://digitalout.vo.llnwd.net/o35/s/mobilevforum/test/'
});
}
