2013-06-20 2 views
2

Я пытаюсь получить путь вокруг IE получать изображения из кэша при использовании AngularJSугловой js '?' в нг-Src вызывает бесконечный цикл

У меня есть этот следующий код

<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()}}, он отлично работает.

Пожалуйста, помогите .. Заранее спасибо

UPDATE: Здесь Вы можете найти изменения в контроллер, основной вопрос. Благодаря ответ от Ливиу Т.

$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; 
    } 
+0

какой версии IE вы используете? Это работает, по крайней мере, в IE8 + - http://jsfiddle.net/sh0ber/hakGL/ – sh0ber

+0

Я пробовал в IE9 и Firefox. Это не работает в обоих. У скрипки есть абсолютный url. Я не знаю, проблема в том, что я использую url с './' – Srijit

+0

Это не проблема, к сожалению. Можете ли вы опубликовать демоверсию, воспроизводящую проблему? – sh0ber

ответ

5

Ну я думаю, что проблема функция getRandom возвращает другое значение каждый раз, когда он называется. Вот что происходит:

  1. Угловая называют вашу функцию
  2. Получает значение
  3. Престола он отличается от предыдущего значения
  4. Marks цикл, как грязный
  5. После завершения цикла он повторно запускает цикл таким образом, получая новое значение ...

Идея заключалась бы в том, чтобы getRandom выдавал сдержанные значения Период времени. Например, дайте новое значение каждые 1, 10, 30 секунд, что вы считаете нужным.

Этот совет применим ко многим вещам. Угловой не дает никаких гарантий относительно того, сколько раз он будет называть ваши функции, которые находятся в привязках. Поэтому вам нужно сделать их быстрыми, а также вам нужно убедиться, что для одного входа они возвращают один и тот же результат (чаще всего, хотя в этом случае это может быть оправдано).

Также учитывайте, когда и как изображение может измениться, и если фактические изменения могут быть вызваны чем-то другим, рассмотрим только создание нового значения результата для getRandom только при инициировании фактических изменений (например: пользователь загружает новое изображение профиля таймер выполняет и т.д.)

UPDATE: Невозможно воспроизвести его в plunker с помощью Chrome

+0

Ничего себе !! Это сработало ... проблема с getRandom(). Я обновил сообщение с изменениями, которые сработали – Srijit