Question

在我的控制器中，我呼叫服务。此服务向PHP文件发出请求，该文件为我提供了图像的URL。

原因是图像位于“Media Vault”内，这意味着我需要生成一个像这样的散列URL才能查看它：

http://xxxx.vo.llnwd.net/o35/s/xxx/test/thumbs/slide1.jpg?e=1365006137&h=5852aeaf5beeeebff05a601801b61568

上面的网址已经过期，因此您不会看到该特定链接中的任何内容。

我的图片标记是这样的：

<img id="thumbnail" class="glow" ng-src="{{currentThumb}}" width="200" height="150"/>

我的控制器中的currentThumb是：

$scope.currentThumb = ImageService.getImage({
    'type' : 'thumb',
    'index' : $scope.currentIndex + 1,
    'location' : $scope.location
});

我的服务如下：

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

当前的ImageService成功返回一个URL（至少它显示了控制台中的url），当在控制台中单击日志结果时，图像加载正常。图像没有更新的原因是什么？

Answer 1

我不确定你需要如何调用它，但另一种可能更好的方法是在控制器的解析块中调用ImageService.getImage()。这样它就会在控制器和视图处理之前加载。

<强>的jsfiddle

http://jsfiddle.net/HYDmj/1/

查看

<div ng-app="main"> <div ng-controller="ExampleController"> <h1>currentThumb</h1> <img ng-src="{{currentThumb.data}}"> </div> </div>

<强>码

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/' }); }

在Angular中使用ng-src更新图像

1 个答案: