Question

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

问题在于，我抓取的图片来自API，不允许我将任何伪造的东西附加到网址，以使每次都有不同的网址。所以，没有?_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尝试刷新它？我还尝试将$scope.image_url设置为''，然后再将其更改为网址。

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

Answer 1

我向此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 code：

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

Answer 2

这样的东西应该有用......请注意，这不会被测试，你可能需要在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;

在没有任何参数破解的情况下重新加载javascript中的图像

2 个答案: