Имея угловой интервал, не зависящий от контроллера

Question

У меня есть разные страницы на приложении, которые имеют свои собственные контроллеры. Одна из них имеет функцию $ interval, скажем, таймер. Нажмите кнопку, чтобы начать эту функцию интервала, которая обновляется каждый раз. Что я хочу иметь, я хочу иметь возможность перейти к любой другой странице в моем приложении (вызов разных контроллеров), но Я хочу, чтобы мой интервал продолжал работать, пока я не остановил его явно с первого контроллера. A кореньScope интервал так сказать. Как мне это сделать?

EDIT: Спасибо Крису и Патрику я теперь есть простая служба, выглядит следующим образом:

.service('TimerService', function($interval) { 
    var promise; 
    var timerSeconds = 0; 

    this.start = function() { 
     promise = $interval(function() { 
     timerSeconds++; 
     }, 1000); 
    }; 

    this.stop = function() { 
     promise.cancel(interval); 
     timerSeconds = 0; 
    }; 

    this.getTimer = function() { 
     return timerSeconds; 
    } 
    }) 

хранить и мое текущее значение (timerSeconds) в этой службе. Но как я могу синхронизировать это значение с моим контроллером? Служба увеличивает таймерSeconds, а в начале моего контроллера я читаю его из этой службы через функцию getTimer(), но она явно не будет обновляться на моем контроллере. Как я могу синхронизировать этот атрибут службы с моим локальным атрибутом?

EDIT:

, когда я определить свой атрибут службы как объект и timerSeconds как номер внутри этого объекта (кажется примитивы не могут быть синхронизированы):

var timer = {seconds : 0}; 

this.getTimer = function() { 
    return timer; 
} 

и получить этот объект из моих через этот приемник:

vm.timer = TimerService.getTimer(); 

все они синхронизированы.

Answer 1

Не беспокойтесь, добавив его в $ rootScope. Используйте сервис, который можно использовать в любом месте приложения. Вот один таймер, который может начинаться и останавливаться. Определите интервалTimeout в самой службе, или если вы хотите быть очень гибким, сделайте это в провайдере (возможно, для этого примера, возможно, слишком много).

angular.module('myApp', []) 
 

 
.service('AppCallback', function ($interval) { 
 
    var states = states = { 
 
     PENDING: 0, 
 
     STARTED: 1 
 
    }, intervalTimeout = 3000, // Set this 
 
    interval; 
 

 
    this.states = states; 
 
    
 
    this.state = states.PENDING; 
 
    this.start = function (callback) { 
 
     if (this.state !== states.PENDING) { 
 
      return; 
 
     } 
 

 
     interval = $interval(callback, intervalTimeout); 
 
     this.state = states.STARTED; 
 
    } 
 

 
    this.stop = function() { 
 
     if (this.state !== states.STARTED) { 
 
      return; 
 
     } 
 
     $interval.cancel(interval); 
 
     this.state = states.PENDING; 
 
    }; 
 
}) 
 

 
.controller('MainController', function ($scope, AppCallback) { 
 
    var vm = {}, 
 
     count = 0; 
 
    
 
    vm.toggle = function toggle() { 
 
    if (AppCallback.state === AppCallback.states.PENDING) { 
 
     AppCallback.start(function() { 
 
     vm.data = 'Ticked ' + (++count) + ' times.'; 
 
     }); 
 
    } else { 
 
     AppCallback.stop(); 
 
    } 
 
    }; 
 
    
 
    
 
    $scope.vm = vm; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MainController"> 
 
    {{vm.data}} 
 
    <br /> 
 
    <button ng-click="vm.toggle()">Toggle</button> 
 
</div>

Answer 2

Если вы хотите поделиться любыми данными между контроллерами, правильным способом является использование службы.

Я бы тогда создал сервис, который позволит вам остановить и запустить этот таймер/интервал.

Начальный контроллер будет удалять это, и он будет продолжать «тикать» навсегда, пока он не остановится.