Выполнение действий на неактивной странице в angular

Я новичок в AngularJS, исходя из фона jQuery. На данный момент я делаю свои первые шаги и создаю несколько примеров страниц с помощью Angular.

Теперь я хотел добиться чего-то вроде этого: подумайте о приложении с двумя «страницами». Во-первых, это главная страница с текстом и т. д., а на другом есть таймер. Таймер должен начинаться с 0 и считать до бесконечности каждую секунду, прямо в момент запуска приложения. Это первое, чего я не могу добиться. Мой таймер запускается только тогда, когда я перехожу на вторую страницу.

Вторая проблема: когда таймер работает, я хочу просмотреть все страницы в приложении, а таймер все еще должен считать в фоновом режиме. Что ж, на данный момент он работает в фоновом режиме, но каждый раз, когда я перехожу на страницу с таймером, кажется, что открывается другая задача, которая подсчитывает таймер, что приводит к очень редкому и более быстрому подсчету.

В моем индексном html я использую ng-view для вставки других страниц с помощью ngRoute. Это прекрасно работает.

Моя страница таймера выглядит так:

<div ng-controller="TimeCtrl">
    <p>Counter: {{counter.getValue()}}</p>
</div>

Затем я написал контроллер таймера для своего приложения:

app.controller("TimeCtrl", function($scope, $interval, Counter){

    $scope.counter = Counter;

    $interval(function(){
        $scope.counter.update();
    }, 1000);
});

И есть фабрика счетчиков:

app.factory("Counter", function () {

    this.counter = 0;

    var self = this;

    return {
        update : function () {
            self.counter++;
        },
        getValue : function () {
            return self.counter;
        }
    }
});

Я был бы признателен за любую помощь, так как Angular поначалу дается мне не так просто.


javascript angularjs intervals angularjs-routing angularjs-factory
person Fidel90    schedule 18.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо использования $interval на контроллере используйте его на сервисе/фабрике:

app.factory("Counter", function ($interval) {
    this.counter = 0;
    var self = this;

    $interval(function(){
        self.update();
    }, 1000);  

    return {
        update : function () {
            self.counter++;
        },
        getValue : function () {
            return self.counter;
        }
    }
});

Таким образом, если ваш TimeCtrl будет уничтожен (по какой-либо причине), счетчик все равно будет увеличиваться.

Также обратите внимание, что каждый раз, когда вы повторно открываете страницу, которая создает новый TimeCtrl, также будет определяться новый интервал. Вот почему вы получаете этот «редкий и быстрый счет».

Что касается загрузки только на второй странице, убедитесь, что вы добавили службу Counter в качестве зависимости к вашему основному контроллеру, чтобы служба немедленно создавалась (иначе счетчик не запустится). Если у вас нет основного контроллера, используйте блок выполнения:

app.run(function(Counter) {
  // just inject the Counter so that it gets instantiated
})
person bmleite    schedule 18.09.2014