我正试图在我的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发现了很多问题,但我仍然无法摆脱这个错误。谢谢你的帮助。
您的绑定是随机的,每次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
相同的代码)使用ont时间绑定:
<img ng-src="{{::randomPicture()}}">