Обновления привязки после нажатия на элемент, хотя строка в контроллере уже обновлена ​​(Угловая 1.5)

Question

У меня есть атрибут ng-class (который я сам не написал). Он привязан к строковой переменной в контроллере. Он выглядит так: <some-tag ng-class="'indicator_' + $ctrl.stringValue"></some-tag>.

Когда окно сначала загружается - оно содержит правильные данные, но после того, как строка обновлена ​​в контроллере - значение в атрибуте class обновляется после того, как я нажимаю на элемент (щелчок откроет список, но Я не думаю, что это актуально).

Я читал, что первое, что нужно проверить в этих случаях, состоит в том, что код окружен $scope.$apply. Это, потому что, когда я пытаюсь добавить его, я получаю сообщение об ошибке «$ digest уже в процессе». Ищем $ctrl и ng-class info, я прочитал AngularJS component doc и this site, что дало мне некоторый базовый фон об этих предметах.

Дело в том, что я не нашел примеров ng-class с $ctrl. Может быть, это не имеет значения, но, возможно, нет :)

Пример для нерелевантного вопроса, который я нашел в теме: Angular ngClass is not updating my classes even though my condition change as expected. В целом, большинство примеров, которые я нашел, включают фигурные скобки, которые, как я считаю, не являются релевантными в этом случае, поскольку я привязываю строку (возможно, я обманываю ее :)).

Я подозреваю, что это, вероятно, не связывало его правильно, я просто не знаю почему.

---

Edit:

После продолжения искать эту тему, я больше не уверен, что это связано с ng-class (так что я редактировал титул, а). Это больше похоже на проблему обновления.

Я озадачен тем, почему страница не обновляется, так как всюду я читаю - они говорят, что Угловой должен сам вызвать функцию дайджеста, и я не должен вмешиваться.

Edit2:

Я работаю с typeScript и stringValue обновляется через событие от службы. Но строка действительно обновляется - поэтому я не уверен, что это важная информация, чтобы понять проблему, но стоит упомянуть :)

Answer 1

Проблема решена!: D

Все, что я должен был сделать, это добавить $timeout(0) после обновления строки в контроллере!

Объяснение: это была проблема дайджеста, и причина, по которой я не мог использовать $scope.$apply(), заключается в том, что я пытался сделать это напрямую. Мне нужно было сделать безопасное применение, что означает - сначала убедитесь, что в этой области нет дайджеста, а затем выполните действие.

Оказывается, что это простой способ сделать это, использовать $timeout(0).

Answer 2

Я подготовил плункер с угловым 1.5.7 с демонстрацией того, что вы описали. Там, кажется, не проблема, или что-то особенное, что вы должны делать. (Я использовал другой псевдоним для контроллера, который является лучшей практикой, но $ Ctrl работает отлично, а также.)

https://plnkr.co/edit/wCpBQ5?p=preview

const DemoComponent = { 
 
    controller: DemoController, 
 
    controllerAs: 'demoCtrl', 
 
    template: ` 
 
    <h2 ng-class="'demo_' + demoCtrl.classSuffix">{{ demoCtrl.classSuffix }}</h2> 
 
    <button ng-click="demoCtrl.changeClass()">Change Class</button> 
 
    ` 
 
} 
 

 
angular.module('myapp', []) 
 
    .component('demo', DemoComponent);

Это будет очень полезно, если вы может воспроизвести проблему в plunker и опубликовать ссылку. В противном случае, надеюсь, вы найдете ответ в этом plunker.