且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

角JS“?”在NG-SRC导致无限循环

更新时间:2023-11-02 18:53:22

嗯,我认为这个问题是getRandom函数返回每次它被称为不同的时间值。
这里是发生了什么:


  1. 角调用你的函数

  2. 获取值

  3. 见的是从previous值
  4. 不同
  5. 标记的周期为脏​​li>
  6. 周期结束后它重新运行从而获得一个新的值周期...

这个想法是有getRandom给予谨慎的值在一段时间。
例如只给一个新值,每1,10,30秒不管你认为合适的。

此建议也适用于很多事情,其实。角没有提供有关它多少次调用在绑定找到了你的功能保障。所以,你需要让他们快,你也需要确保在相同的输入,他们返回相同的输出(大部分时间,尽管在这种情况下,它可能是合理的)。

另外还要考虑什么时候/图像会如何改变,如果实际的变化可以用别的东西来触发仅考虑创建只有当实际变化触发getRandom一个新的结果值(例如:用户上传新的配置文件的图像,一个计时器执行等)

更新:不能复制它在 plunker 使用Chrome

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

I have this following code

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

In the controller

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

When I run, I get this error

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

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

Please help.. Thanks in advance

UPDATE: Please find below the changes to controller that fixed the issue. Thanks to the answer from 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;
    }

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

  1. Angular call your function
  2. Gets the value
  3. See's it's different from the previous value
  4. Marks the cycle as dirty
  5. After the cycle is finished it re-runs the cycle thus getting a new value ...

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.

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).

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)

UPDATE: Can't replicate it in plunker using Chrome