AngularJS $apply wird nicht in einem Intervall aufgerufen, wenn der $scope von einem Controller zum anderen und zurück geändert wurde.

Question

Ich erstelle diese Direktive mit Angular, die als Mini-Timer funktioniert. Ich brauche nichts anderes als das Zählen von Sekunden und Minuten. Die Direktive funktioniert gut, solange ich auf der Seite bleibe, auf der die Direktive aufgerufen wird.

Das Problem tritt auf, wenn ich zu einer anderen Seite wechsele und dann zurückkomme. Der Timer sollte weiterhin mit der aktuellen Zeit angezeigt werden.

Ich habe ein globales window.timer Objekt, das den Zustand des Timers speichert.

app.directive('callTimer', function() {
  return {
    restrict: 'E',
    controller: function($scope, $rootScope) {
      $scope.minutes = (window.timer.state.minutes || 0)
      $scope.seconds = (window.timer.state.seconds || 0)

      $scope.startTimer = function() {
        window.timer.interval = window.setInterval(function() {
          // incrementTimer
          window.timer.state = {minutes: $scope.minutes,seconds: $scope.seconds};
          $scope.$apply($scope.updateDisplay);
        }, 1000);
      };

      $scope.stopTimer = function() { /*stuff to stop timer*/};

      $scope.updateDisplay = function() {
        $scope.minDisplay = String($scope.minutes).padLeft('0', 2);
        $scope.secDisplay = String($scope.seconds).padLeft('0', 2);
      };

      $scope.updateDisplay();
    }
  };
});

Hier ist das HTML

{{minDisplay}}:{{secDisplay}}

Der Timer befindet sich auf meiner Startseite. Wenn ich zu einer anderen Seite gehe, zählt der Timer weiter, aber wenn ich zur Startseite zurückkehre, wird meine updateDisplay Funktion nicht aufgerufen.

BEARBEITEN: Hinzufügen mehrer des Direktive-Codes.

Answer 1

|Ist es eine Single-Page-App? Wenn ja, speichern Sie den Timer nicht innerhalb der Direktive. Speichern Sie ihn in einem Controller oder an einem anderen Ort. Direktiven werden neu erstellt, wenn Sie zu einer anderen Seite navigieren, sodass es keine Möglichkeit gibt, den Timerwert innerhalb der Direktive zu speichern.

Answer 2

Ok, also habe ich das herausgefunden. Das Problem ist, dass der $scope innerhalb des Intervalls tatsächlich eine andere Instanz des Controllers ist als außerhalb, nachdem Sie von einem Controller zum anderen gewechselt sind. Hier ist mein Code (Er ist tatsächlich in Coffeescript).

Es ist nicht besonders schön, aber die Idee ist, welchen scope ich verwenden möchte, wenn ich die Ansicht aktualisiere. Wenn jemand eine Idee hat, wie ich das aufräumen kann, wäre das großartig, aber dieser Code macht genau das, was ich brauchte.

https://gist.github.com/jwoertink/5256e80f393a150f8b21