Бесконечный цикл $digest, когда в ng-repeat есть стиль ng, который вызывает функцию, использующую Math

Я пытаюсь динамически установить цвета фона моих меток. Как я реализовал это, чтобы использовать стиль ng следующим образом:

function getColor() {
  return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}
<span ng-repeat='interest in ctrl.profile.interests'      
     class='label interest'
     ng-style="{'background-color': ctrl.getColor()}"> 
     {{ interest }}
</span>

Однако всякий раз, когда я использую Math внутри getColor, я получаю ошибку бесконечного цикла дайджеста ниже. У вас есть обходной путь для этой проблемы или другое решение для динамической настройки цвета фона? Спасибо!

10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [ [{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#3bf02a"},"oldVal":{"background-color":"#fa8432"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#c0a641"},"oldVal":{"background-color":"#bf3c51"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#42fa1b"},"oldVal":{"background-color":"#a35769"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#d18783"},"oldVal":{"background-color":"#f35b4"}},{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#9a0847"},"oldVal":{"background-color":"#ddd27b"}} ], [{"msg":"{'background-color': ctrl.getColor(interest)}","newVal":{"background-color":"#cb0e35"},"oldVal":{"background-color":"#3bf02a"}} ... ]]


angularjs angularjs-ng-repeat ng-style angularjs-digest
person fab    schedule 22.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У вас не может быть функции, которая каждый раз возвращает другое значение.

Каждый цикл дайджеста Angular выполняет несколько дайджестов до тех пор, пока значения области не станут стабильными (такими же, как и последний дайджест). Если значения в этой области никогда не стабилизируются, вы получите бесконечные дайджесты, а предел по умолчанию равен 10 до углового прерывания.

Я бы предложил сначала создать массив случайных цветов в контроллере и использовать $index в ng-repeat для получения каждого значения:

this.randomColors = this.profile.interests.map(function(){
    return ('#' + Math.floor(Math.random() * 16777215).toString(16)); 
});

Затем в поле зрения:

<span ng-repeat='interest in ctrl.profile.interests'      
     class='label interest'
     ng-style="{'background-color': ctrl.randomColors[$index]}"> 
     {{ interest }}
</span>
person charlietfl    schedule 22.07.2017
comment
Это решило проблему. Спасибо чувак! Большая помощь. В документации это было сказано, но это никогда не щелкало, чтобы я делал то же самое. *фейспалм* - person fab; 23.07.2017
comment
Легко не осознавать этого, пока не поймешь, как работают циклы дайджеста. - person charlietfl; 23.07.2017