Góc - Lỗi: Đã đạt được 10 lần lặp lại ($). Hủy

Question

tôi đang cố gắng để đưa một số nguyên ngẫu nhiên trong con đường ng-src của tôi, như thế:

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

Và đây là chức năng cơ bản của tôi trong bộ điều khiển của tôi:

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

Các hình ảnh được hiển thị nhưng trong bảng điều khiển tôi có lỗi này:

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

Tôi đã tìm thấy nhiều câu hỏi về điều đó ở đây trong ngăn xếp nhưng tôi vẫn không thể loại bỏ lỗi đó. Cảm ơn bạn đã giúp đỡ.

Answer 1

Ràng buộc của bạn là ngẫu nhiên, nó sẽ khác nhau mỗi khi Góc sẽ thực thi trình theo dõi của ràng buộc này.

Tuy nhiên, Góc chỉ dừng chu kỳ tiêu hóa khi đạt đến trạng thái ổn định trong đó tất cả người theo dõi trả về cùng một giá trị hai lần liên tiếp, điều này không bao giờ xảy ra với bạn.

Tóm lại, bạn không thể ràng buộc một giá trị ngẫu nhiên hoặc bất kỳ thứ gì luôn khác nhau, trong một liên kết Góc. Bạn nên tạo hình ảnh của mình một lần và tùy chọn ngẫu nhiên lại hình ảnh dựa trên một số sự kiện.

$scope.randomPicture = generateRandomPicture(); 

Và

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

UPDATE: Và nếu bạn muốn làm mới hình ảnh mỗi 3 giây ví dụ, bạn có thể thêm

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

Cập nhật 2: Bây giờ Tôi hiểu rõ hơn vấn đề của bạn, tôi sẽ đề nghị giữ mọi thứ như vậy nhưng sử dụng :: được hiển thị bên dưới nếu sử dụng ít nhất là Angular 1.3. Bằng cách này, bạn sẽ có một hình ảnh ngẫu nhiên được tạo cho mỗi người dùng, nhưng chỉ được tạo một lần.

Trên một phiên bản trước đó của Góc hoặc cách khác, bạn có thể tạo ra một hình ảnh xác định cho mỗi người dùng cảm thấy ngẫu nhiên. ví dụ sử dụng HTML của bạn:

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

Và trong điều khiển của bạn

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

---

Lưu ý rằng nếu bạn đang sử dụng 1.3+ góc và chỉ muốn tạo ra hình ảnh một lần, bạn có thể sử dụng ont thời gian ràng buộc sử dụng :: cú pháp (sử dụng cùng mã cho randomPicture):

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