Angular - Error: 10 $digest() iterations reached. Aborting

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!

我在 Whosebug 中发现了很多关于此的问题，但我仍然无法消除该错误。感谢您的帮助。

Answer 1

你的绑定是随机的，每次都不一样Angular会执行这个绑定的watcher

但是，Angular 只会在摘要循环达到稳定状态时停止摘要循环，此时所有观察者 return 连续两次使用相同的值，而你的不会发生这种情况。

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

$scope.randomPicture = generateRandomPicture();

和

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

更新： 如果你想每 3 秒刷新一次图片，你可以添加

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

更新 2： 既然我更好地理解了你的问题，我会建议保持一切不变，但如果使用 [=45，则如下所示使用 :: =] 至少 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+ 并且只想生成一次图片，则可以使用 ont-time binding 使用 :: 语法（使用randomPicture):

的相同代码

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

Angular - Error: 10 $digest() iterations reached. Aborting

Angular - Error: 10 $digest() iterations reached. Aborting

javascript

random

angularjs