避免 AngularJS 中包含随机内容的无限摘要循环

Question

我的基本结构是我有一个

<img ng-repeat="img in api.images" src="{{ img.url }}">

api 有一个图像 ID 列表，并且必须进行 HTTP 调用以从服务器获取每个图像 ID 的 URL。但是，这些 URL 具有 HMAC 签名，因为它们过期了，并且每次您发出请求时，此签名都会有所不同。因此，api.get_image_urls 调用在执行时总是会返回不同的东西，本质上

get_image_urls: function() {
    var deferred = $q.defer();
    var that = this;
    $http.post(this.url + "image_urls/", {
      "image_ids": Object.keys(this.images)
    })
    .success(function(data) {
        for (var image_id in data.images) {
          that.images[image_id].url = data.images[image_id];
        }
        deferred.resolve();
    });
    return deferred.promise;
  }

因此触发无限摘要循环，因为网址每次都会更改。避免这种情况的最佳策略是什么？

Answer 1

在你的情况下，我会创建一些 pre-builder。每次api.images 更改时都会触发摘要循环。要使其工作，请延迟运行其他进程，假设 5 秒并创建 api.images 的副本。

类似：

  $scope.copyOfImageApi = [];

  // run instant loop every 5 sec 
  var rebuildImages = function() {
        /* ... */

      $scope.api.images = <get promise from service>

      $scope.copyOfImageApi = angular.copy($scope.api.images); 


      $timeout(rebuildImages, 5000); 
    }

 rebuildImages();

之后：

<img ng-repeat="img in copyOfImageApi" src="{{ img.url }}">

在这种情况下，您的数组将每 5 秒更新一次，以防止摘要循环中断。

---

_{没有检查语法}