角JS“？”在NG-SRC导致无限循环 [英] angular js '?' in ng-src causes infinite loop

问题描述

我试图解决在使用IE AngularJS从缓存中获取图像的方式。

我有这个以下code

 ＆LT; IMG NG-SRC =./个人/图像/ {{team._id}} / {{member._id}} {{getRandom（）}}＆GT ;
 

在控制器

  $ scope.getRandom =功能（）{
        返回？跑=+新的Date（）的getTime（）+。;
}
 

当我跑，我得到这个错误

 错误：$ 10摘要（）迭代到达。中止！在过去的5次迭代发射观察家：[[FN：函数（）{\\ n \\使用严格的\\; \\ n请{为（VAR B = 0，C = Q，G，B＆c为C; b ++）{如果（typeof运算（G = L并[b]）== \\功能\\）G =克（一）中的g ==空||克==小号G = \\\\？！typeof运算G = \\字符串\\＆放大器;及（G = DA（g）条）; b [b] = G}返回B.join（\\\\）}赶上（F）{D（错误（\\错误，而插值：\\ + E + \\\\\\ñ\\？+ f.toString（）））}};的newval：\\./个人/图片/ 51c209ead8b8d863ad69de97 / 51c209ead8b8d863ad69de65跑= 1371757784485 \\; OLDVAL：\\./个人/图片？/ 51c209ead8b8d863ad69de97 / 51c209ead8b8d863ad69de65跑= 1371757784457 \\，FN：函数（）{\\ n \\使用严格的\\; \\ n请{为（VAR b = 0，C = q，G，b＆c为C; b ++ ）{如果（typeof运算（G = L并[b]）== \\功能\\）G =克（一）中的g ==空||克==小号G = \\\\？！typeof运算G = \\字符串\\＆放大器;及（G = DA（g）条）; b [b] = G}返回B.join（\\\\）}赶上（F）{D（错误（\\错误，而插值？：\\+ E + \\\\\\ñ\\+ f.toString（）））}};的newval：\\./个人/图片/ 51c209ead8b8d863ad69de97 / 51c209ead8b8d863ad69dec9跑= 1371757784487 \\; OLDVAL：\\./个人？/图像/ 51c209ead8b8d863ad69de97 / 51c209ead8b8d863ad69dec9跑= 1371757784459 \\，FN：函数（）{\\ n \\使用严格的\\; \\ n请{为（VAR b = 0，C = q，G，b＆c为C ？; b ++）{如果（typeof运算（G = L [b]）== \\功能\\）G = G（一），G == NULL ||摹==小号G = \\\\：typeof运算摹！= \\字符串\\＆放大器;及（G = DA（g）条）; b [b] = G}返回B.join（\\\\）}赶上（F）{D（错误（\\错误而插值：\\+ E + \\\\\\ñ\\+ f.toString（）））}};的newval：\\./个人/图片/ 51c209ead8b8d863ad6
 

如果我删除 {{getRandom（）}} 它工作正常。

请帮助..在此先感谢

更新：请看以下更改控制器，解决了该问题。感谢来自利维乌·T中的答案。的

  $ scope.lastMillis =新的日期（）的getTime（）。
    $ scope.getRandom =功能（）{
        VAR curMillis =新的日期（）的getTime（）。
        如果（curMillis- $ scope.lastMillis＆GT; 5000）{
            $ scope.lastMillis = curMillis;
        }
        回归？跑=+ $ scope.lastMillis;
    }
 

解决方案

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

1. 角调用你的函数


2. 获取值


3. 见的是从previous值
不同

4. 标记的周期为脏
   
5. 周期结束后它重新运行从而获得一个新的值周期...

这个想法是有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

这篇关于角JS“？”在NG-SRC导致无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！