Angular - 错误:达到$ $ 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中发现了很多问题,但我仍然无法摆脱这个错误.谢谢你的帮助.

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

请注意,如果你采用了棱角分明1.3+,只需要一次生成的图片,你可以使用ONT时绑定使用的::语法(使用相同的代码randomPicture):

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