AngularJS Problem mit ng-show und rootScope

Question

Ich habe eine App, die Echtzeitereignisse auslöst. Und wenn eines dieser Ereignisse eintritt, ändern wir ein Modell in $ rootScope mit dem folgenden Code:

setTimeout(function(){$rootScope.controlsVisible = true}, 1500); 

Dies funktioniert, wenn der Benutzer bereits in der Registerkarte ist und mit Hilfe der App. Wenn der Benutzer jedoch eine andere App oder sogar eine andere Registerkarte verwendet, aktualisiert dieser Code das Modell (ich habe versucht, einige console.logs hinzuzufügen), aber das div wird nicht angezeigt (es entfernt nicht die ng-hide Klasse).

Die einzige Möglichkeit dafür zu funktionieren ist, wenn ich irgendwo auf die App klicke. Ich habe etwas recherchiert und festgestellt, dass das Problem auf dem setTimeout liegt, wenn der Tab nicht fokussiert ist. Wie bereits erwähnt, wird jedoch die console.log ausgeführt und das Modell wird aktualisiert. Das ist ein merkwürdiges Verhalten, das ich nicht herausfinden kann.

Answer 1

Sie scheinen zu fehlen $rootScopt.$apply oder nicht $timeout anstelle von setTimeout.

Lösung 1:

setTimeout(function(){ 
    $rootScope.$apply(function() { 
     $rootScope.controlsVisible = true; 
    } 
}, 1500); 

Lösung 2:

Wenn Sie $timeout injizieren kann, dann:

$timeout(function() { $rootScope.controlsVisible = true; }, 1500); 

---

Der Grund, es funktioniert, wenn Die Registerkarte hat möglicherweise den Fokus, dass etwas anderes die $digest Schleife auslösen könnte.

Answer 2

Versuchen Sie, anstelle von setTimeout Angulars $ timeout zu verwenden. Andernfalls müssen Sie $ apply() anwenden.

https://coderwall.com/p/udpmtq/angularjs-use-timeout-not-settimeout