2

我正在尝试解决 IE 在使用 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()}}它工作正常。

请帮忙..提前谢谢

更新：请在下面找到解决问题的控制器更改。感谢 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;
    }
4

1 回答 1

5

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

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

这个想法是让 getRandom 在一段时间内给出谨慎的值。例如，仅每 1、10、30 秒提供一个新值，只要您认为合适。

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

还要准确考虑图像何时/如何更改，如果实际更改可以由其他东西触发，请考虑仅在触发实际更改时才为 getRandom 创建新结果值（例如：用户上传新的个人资料图像，执行计时器， ETC）

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

于 2013-06-20T21:50:34.673 回答