避免在AngularJS中使用随机内容的无限摘要循环

Avoid Infinite digest loops in AngularJS with random content

本文关键字：无限 循环 随机 AngularJS      更新时间：2023-09-26

我的基本结构是有一个

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

因此触发无限摘要循环，因为url每次都改变。避免这种情况的最佳策略是什么?

在您的情况下，我会创建一些预构建器。每次当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秒更新一次，这应该防止摘要循环中断。

<子>没有检查语法

相关文章：