2

AngularJS の使用中にキャッシュから画像を取得する IE を回避しようとしています。

私はこの次のコードを持っています

<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 の新しい結果値を作成することを検討してください (例: ユーザーが新しいプロファイル画像をアップロードし、タイマーが実行されます)。など）

更新: Chrome を使用してplunkerで複製することはできません

于 2013-06-20T21:50:34.673 に答える