Hilft AngularJS in irgendeiner Weise, wenn es einen Dauerzähler auf meiner Webseite gibt?

Question

Ich habe eine Anwendung, die Angular Ui-Router verwendet. Wenn der Router auf einen bestimmten Zustand eingestellt ist, möchte ich einen Timer von beispielsweise 2 Stunden haben. Während es auf einen anderen Zustand eingestellt ist, möchte ich den Zähler herunterzählen lassen. Ich möchte die verbleibende Zeit auf meinem Bildschirm anzeigen lassen.

Hat jemand ein Codebeispiel darüber, wie ich diese Funktionalität implementieren könnte? Wenn jemand etwas Ähnliches getan hat, würde ich mich über jeden Rat freuen, den er geben könnte.

Answer 1

ich derzeit einen Countdown Dienst für diesen Zweck in meinem Projekt verwende.

1. Start init es auf der ersten Seite

   app.controller('view1Ctrl', function($scope, $csCountdown){ 
       $csCountdown.init(2 * 3600); // 2 hours 
       $scope.countdown = $csCountdown.data; 
   }) 
   

2. der Zähler auf der zweiten Seite

   app.controller('view2Ctrl', function($scope, $csCountdown){ 
       $csCountdown.start(); 
       $scope.countdown = $csCountdown.data; 
   }) 
   

starten können Sie: wie pro Ihre Anforderung können Sie Service wie unten verwenden Zeigen Sie den Wert auf einer beliebigen Seite mit countdown.stringValue

an

<h1>Time : {{countdown.stringValue}}</h1> 

können Sie es funktioniert sehen PLUNKER LINK. Ich habe view1 & view2 mit Übergangsanimation erstellt.

EDIT

ich aktualisieren die PLUNKER 2 ein praktisches Beispiel zu haben.

1. Zunächst sehen Sie die Anweisungsseite, auf der der Timer auf 2 Stunden initialisiert wird.

2. Dann auf die Fragen 1, bewegen, wo Timer

   beginnt

3. von Frage 1 können Sie Seite gehen zu helfen, wo der Timer

4. dann pausiert Sie zurück bewegen Frage 2, wo Timer fortgesetzt. ..

Answer 2

Sie können einen Service und eine Richtlinie für diesen Zweck kombinieren. Der Service verwendet Cookies, um den Countdown-Wert zu speichern. So wird es auch nach einer Aktualisierung weiter zählen.

können Sie starten oder Countdown von Controller stoppen:

CountdownService.startCounting(3 * 30 * 1000); // milliseconds 

Dann zeigen die verbleibende Zeit von einer Richtlinie in der Vorlage:

<countdown></countdown> 

Sie können auch den Stil der Richtlinie von Vorlage ändern .

Check out my plunker ...