Angular - 错误：达到10个$digest（）迭代。中止

Question

我正在尝试在我的ng-src路径中放置一个随机整数，就像这样：

<div ng-repeat="user in users">
      <img ng-src="{{randomPicture()}}" alt="">
</div>

这是我在控制器中的基本函数:

$scope.randomPicture = function(){
  var PATH = 'assets/images/';
  var image = Math.floor((Math.random() * 12) + 1);
  var ext = '.jpg';
  var randomPic = PATH + image + ext;

  return randomPic;
};

图像已显示，但在控制台中出现以下错误：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

我在StackOverflow上找到了许多相关问题，但是我仍然无法摆脱这个错误。感谢您的帮助。

- adam

---

尝试这个代码：src="randomPicture()" - P.JAYASRI

我尝试了这种方式，但不幸的是它没有起作用... - adam

以下是floribon的更新答案，完美地解决了我的问题并修复了10 $digest()错误。 - adam

Answer 1

您的绑定是随机的，每次Angular执行此绑定的监视器时都会有所不同。

然而，当所有的监视器两次返回相同的值时，Angular才会停止摘要循环。但是这种情况在您的绑定中永远不会发生。

简而言之，在Angular绑定中不能绑定随机值或始终不同的任何内容。您应该生成您的图片一次，并根据某些事件选项重新随机化。

$scope.randomPicture = generateRandomPicture();

并且

<img ng-src="{{randomPicture}}">

更新: 如果您想每3秒刷新一次图片，可以添加以下代码：

// Generate a new random picture every 3 seconds
$interval(function() {
  $scope.randomPicture = generateRandomPicture();
}, 3000);

更新 2: 现在我更好地理解了你的问题，如果您至少使用 Angular 1.3，那么我建议保持一切不变，但像下面展示的方式使用 ::。这样，每个用户将生成一个随机图片，但仅生成一次。

在较早版本的 Angular 或者作为替代方案，您可以为每个用户生成一个确定性图片，以感觉随机。例如，在您的 HTML 中使用：

<img ng-src="{{randomPicture($index)}}">

在你的控制器中，

var rand1 = Math.round(Math.random()*10);
var rand2 = Math.round(Math.random()*10);

$scope.randomPicture = function(index) {
  var PATH = 'assets/images/';
  var image = (index+rand1*rand2)%13 + 1;
  var ext = '.jpg';
  var randomPic = PATH + image + ext;

  return randomPic;
};

请注意，如果您使用的是 Angular 1.3+ 版本，并且只想生成一次图片，则可以使用 :: 语法实现一次绑定（对于 randomPicture 使用相同的代码）：

---

<img ng-src="{{::randomPicture()}}">

- floribon

---

就像我看到其他人点赞这个答案一样，我想澄清一下，那个解决方案是不起作用的... - adam

@adam，这个解决方案可以解决你的问题：在这个函数中，你无法生成随机图片。相反，当你想要刷新图片集时，应该手动刷新作用域中的图片集：例如在超时后、特定用户操作后等等。也许你可以具体说明一下你期望看到什么？你想要做什么？ - floribon

谢谢Floribon，你说得对，我没有明确我的问题。我所说的图像实际上是在ng-repeat中的Images，我想要的是通过在它们的路径中添加一个随机整数来为这些图像提供唯一的图像，就像我的示例一样。因此，$interval并不是我需要的真正解决方案，对于造成的混淆，我感到很抱歉。我编辑了问题。 - adam

哦，我明白了。我又更新了一次我的答案，给你一个解决方案的想法。你想避免出现两次相同的图片吗？还是这个不是问题？ - floribon

谢谢Floribon，你太棒了，感谢你的帮助 ;) - adam