Das Binding Only Updates nach dem Klicken auf das Element, obwohl die Zeichenfolge im Controller bereits aktualisiert wurde (Angular 1.5)

Question

Ich habe ein ng-class Attribut (das ich nicht selbst geschrieben habe). Es ist im Controller an eine String-Variable gebunden. Es sieht so aus: <some-tag ng-class="'indicator_' + $ctrl.stringValue"></some-tag>.

Wenn das Fenster zuerst geladen wird - es enthält die korrekten Daten, aber nachdem die Zeichenfolge im Controller aktualisiert wurde - wird der Wert im Attribut class nur aktualisiert, nachdem ich auf das Element geklickt habe (der Klick öffnet eine Liste, aber Ich denke nicht, dass es relevant ist).

Ich habe gelesen, dass die erste Sache in diesen Fällen zu überprüfen ist, dass der Code von einem $scope.$apply umgeben ist. Es ist, weil, wenn ich versuche, es hinzuzufügen - ich bekomme einen Fehler, der sagt "$ verdauen bereits in Bearbeitung". Auf der Suche nach $ctrl und ng-class Info, lese ich die AngularJS component doc und this site, die mir einige grundlegende Hintergrundinformationen zu diesen Themen gab. Die Sache ist, ich konnte keine Beispiele für ng-class mit $ctrl finden. Vielleicht ist es irrelevant, aber vielleicht nicht :)

Beispiel für eine irrelevante Frage, die ich in dem Thema fand, ist: Angular ngClass is not updating my classes even though my condition change as expected. Im Allgemeinen sind die meisten Beispiele, die ich fand, geschweifte Klammern, die ich in diesem Fall nicht für relevant halte, da ich eine Schnur binde (vielleicht verwechsle ich mich damit :)).

Ich vermute, es hat es wahrscheinlich nicht richtig gebunden, ich weiß einfach nicht warum.

---

Edit:

Nach Fortsetzung, das Thema zu suchen, ich bin nicht mehr sicher, dass es mit dem ng-class verwandt ist (so dass ich den Titel als auch bearbeitet). Es sieht eher wie ein Aktualisierungsproblem aus.

Ich bin verwirrt, warum die Seite nicht aktualisiert, da überall ich lese - sie sagen, dass die Angular die Digest-Funktion selbst aufrufen sollte, und ich sollte nicht stören.

Edit2:

Ich arbeite mit typeScript und die stringValue wird über ein Ereignis von einem Dienst aktualisiert. Aber die Zeichenfolge aktualisiert - also ich bin mir nicht sicher, es ist eine relevante Information, um das Problem zu verstehen, aber erwähnenswert :)

Answer 1

Problem gelöst !!: D

Alles, was ich tun musste, ist $timeout(0) nach dem Aktualisieren der Zeichenfolge in der Steuerung hinzufügen!

Die Erklärung: Es war ein Digest-Problem, und der Grund, warum ich $scope.$apply() nicht verwenden konnte, ist, weil ich versuchte, es direkt zu tun. Ich musste sicher anwenden, was bedeutet - zuerst sicherstellen, dass es keinen Digest auf diesem Bereich gibt, und dann ausführen anwenden.

Stellt sich heraus, dass ein einfacher Weg, es zu tun ist, $timeout(0) zu verwenden.

Answer 2

Ich bereitete einen Plunder mit Angular 1.5.7 mit einer Demo von dem, was Sie beschrieben. Es scheint kein Problem zu geben, oder etwas Besonderes, was Sie tun sollten. (Ich habe einen anderen Aliasnamen für den Controller, der die beste Praxis ist, aber $ ctrl funktioniert auch gut.)

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);

Es wird, wenn Sie sehr hilfreich sein kann das Problem in Plunker reproduzieren und den Link posten. Ansonsten hoffe ich, dass Sie die Antwort in diesem Fall finden.