1

我正在尝试使用 AngularJS 显示图像并每分钟自动刷新一次。

问题是我正在抓取的图像来自一个 API，它不允许我将任何虚假内容附加到 url 以使 url 每次都不同。所以，不?_ts=12356678，等等……

我目前的代码是这样的：

HTML 模板：

<div data-ng-controller="UpdateController" data-ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
  <img ng-src="{{ image_url }}"></img>
</div>

AngularJS Javascript：

var app = angular.module('app', []);
app.controller('UpdateController', function($scope, $timeout) {
  $scope.image_reloader = function(timer, url) {
    $scope.timer = timer || 10000;
    $scope.updater = function() {
      $scope.image_url = url + '?_ts=' + new Date().getTime();
      $timeout($scope.updater, $scope.timer);
    };
    $scope.updater();
  };
});

这种伎俩，除了?_ts我不能使用的部分......将scope.image_url部分更改为$scope.image_url = url;不做任何事情，它也不会尝试刷新图像。

如何强制 AngularJS 尝试刷新它？在将其更改为 url 之前，我也尝试设置$scope.image_url为。''

AngularJS 只是一个框架，任何 Javascript/jQuery 解决方案都可以，但我更喜欢与 AngularJS 相关的框架。

4

2 回答 2

3

我向这个 API 的供应商发送了一个添加虚拟参数的请求，所以这是可能的，但是现在已经一个月了，没有回复。

我也一直在思考这个问题，终于找到了解决办法。就像使用 # 符号而不是 ? 一样简单。哈希永远不会发送到服务器，但仍然足以让 JavaScript 将其视为不同的请求并因此重新获取图像.. 之前没有考虑过这一点有点尴尬:)

示例（使用我为这个项目做的工作流程，而不是 AngularJS 最佳

角代码：

$scope.image_reloader = function(timer, url) {
  $scope.timer = timer || 10000;
  $scope.updater = function() {
    $scope.image_url = url + '#' + new Date().getTime();
    $timeout($scope.updater, $scope.timer);
  };
  $scope.updater();
};

HTML 代码：

<div ng-controller="UpdateController" ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
  <img ng-src="[[ image_url ]]"></img>
</div>
于 2013-07-26T01:27:56.383 回答
-1

像这样的东西应该可以工作......请注意，这未经测试，您可能需要从 questionMarkIndex 中添加或减去 1。

var questionMarkIndex = $scope.image_url.indexOf("?");
var newurl = (questionMarkIndex  === -1 ? $scope.image_url : $scope.image_url.substring(0, questionMarkIndex); // remove old ts parameter
newurl += '?_ts=' + new Date().getTime();
$scope.image_url += newurl;
于 2013-06-29T21:41:03.673 回答