角度js'?'在 ng-src 中导致无限循环 [英] angular js '?' in ng-src causes infinite loop

问题描述

我正在尝试解决 IE 在使用 AngularJS 时从缓存中获取图像的方法

I am trying to get a way around IE getting images from cache while using AngularJS

我有以下代码

<img ng-src="./individuals/image/{{team._id}}/{{member._id}}{{getRandom()}}" >

在控制器中

$scope.getRandom=function(){
        return "?ran="+new Date().getTime()+"";
}

运行时出现此错误

Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: function (a){\n\"use strict\";\ntry{for(var b=0,c=q,g;b<c;b++){if(typeof(g=l[b])==\"function\")g=g(a),g==null||g==s?g=\"\":typeof g!=\"string\"&&(g=da(g));B[b]=g}return B.join(\"\")}catch(f){d(Error(\"Error while interpolating: \"+e+\"\\n\"+f.toString()))}}; newVal: \"./individuals/image/51c209ead8b8d863ad69de97/51c209ead8b8d863ad69de65?ran=1371757784485\"; oldVal: \"./individuals/image/51c209ead8b8d863ad69de97/51c209ead8b8d863ad69de65?ran=1371757784457\"","fn: function (a){\n\"use strict\";\ntry{for(var b=0,c=q,g;b<c;b++){if(typeof(g=l[b])==\"function\")g=g(a),g==null||g==s?g=\"\":typeof g!=\"string\"&&(g=da(g));B[b]=g}return B.join(\"\")}catch(f){d(Error(\"Error while interpolating: \"+e+\"\\n\"+f.toString()))}}; newVal: \"./individuals/image/51c209ead8b8d863ad69de97/51c209ead8b8d863ad69dec9?ran=1371757784487\"; oldVal: \"./individuals/image/51c209ead8b8d863ad69de97/51c209ead8b8d863ad69dec9?ran=1371757784459\"","fn: function (a){\n\"use strict\";\ntry{for(var b=0,c=q,g;b<c;b++){if(typeof(g=l[b])==\"function\")g=g(a),g==null||g==s?g=\"\":typeof g!=\"string\"&&(g=da(g));B[b]=g}return B.join(\"\")}catch(f){d(Error(\"Error while interpolating: \"+e+\"\\n\"+f.toString()))}}; newVal: \"./individuals/image/51c209ead8b8d863ad6

如果我删除 {{getRandom()}} 它工作正常.

If I remove the {{getRandom()}} it works fine.

请帮忙.. 提前致谢

更新:请在下方找到解决问题的控制器更改.感谢 Liviu T 的回答.

$scope.lastMillis = new Date().getTime();
    $scope.getRandom=function(){
        var curMillis = new Date().getTime();
        if (curMillis-$scope.lastMillis>5000) {
            $scope.lastMillis = curMillis;
        }
        return "?ran="+$scope.lastMillis;
    }

推荐答案

好吧，我认为问题在于 getRandom 函数每次被调用时都会返回不同的值.这是发生的事情:

Well I think the problem is the getRandom function returning a different value every time it's called. Here's what happens:

1. Angular 调用你的函数
2. 获取值
3. 看看它与之前的值不同
4. 将循环标记为脏
5. 循环结束后，它重新运行循环，从而获得一个新值......

这个想法是让 getRandom 在一段时间内给出谨慎的值.例如，仅在您认为合适的情况下每 1、10、30 秒给出一个新值.

The idea would be to have getRandom give discreet values over a period of time. For example only give a new value every 1, 10, 30 sec whatever you see fit.

这个建议实际上适用于很多事情.Angular 不保证调用绑定中的函数的次数.因此，您需要使它们快速运行，并且您还需要确保对于相同的输入，它们返回相同的输出(大多数情况下，尽管在这种情况下可能是合理的).

This advice applies to many things, actually. Angular provides no guarantees about how many times it will call your functions that are found in bindings. So you need to make them fast and also you need to make sure that for the same input they return the same output(most times, though in this case it might be justified).

还要准确考虑图像何时/如何更改，以及是否可以通过其他方式触发实际更改，请考虑仅在触发实际更改时才为 getRandom 创建新的结果值(例如:用户上传新的个人资料图片，计时器执行等)

Also consider exactly when/how the image might change and if the actual changes can be triggered by something else consider only creating a new result value for getRandom only when the actual changes are triggered(ex: user uploads a new profile image, a timer executes, etc)

更新:使用 Chrome 无法在 plunker 中复制它

UPDATE: Can't replicate it in plunker using Chrome

这篇关于角度js'?'在 ng-src 中导致无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！