javascript - 在 Angular 中重新加载图像

Question

我试图每隔 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>

Answer 1

a) <img ng-src="{{imageUrl}}" /> - 它强制 Angular.js 观察 $scope.imageUrl 值的变化。当这个值改变时 Angular 更新图像。

二)

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

这一行$scope.imageUrl = "http://mywebsite/assets/now.png";始终为 $scope.imageUrl 设置相同的值.结果没有更新。

也许是这段代码

$scope.intervalFunction = function () {
  $timeout(function () {
    $scope.imageURL = 'assets/now.png?_ts=' + new Date().getTime();
  }, 1500);
};

更有意义吗？