Обновление вида с интервалом $

Я строю простой таймер Pomodoro и все еще на ранних этапах обучения Angular. У меня возникают проблемы с обновлением представления каждую секунду с помощью переменной $ scope.timeView. $ scope.timeView ведет журнал на консоль каждую секунду, но не на просмотр. Я попытался ввести интервал $ и использовать apply(), но они не работают. Я уверен, что что-то очевидное для обученного глаза, я продолжу поиск. Тем временем любая помощь будет с благодарностью оценена. Благодарю.

pomodoro_timer.controller('app.controller', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) { 

    // (function() { 
    var intrvl; 
    var t = 1500; 
    var tDiv = $('#time'); 


    $scope.startTimer = function() { 
    if (tDiv.hasClass("notWorking")) { 
     $scope.interval(t); 
     $scope.toggleClass(); 
    } 
    }; 

    $scope.interval = function() { 
    intrvl = setInterval(function(){ 
    t -= 1; 
    $scope.displayTime(t) 
    },1000) 
    } 

    $scope.displayTime = function() { 
    var m = parseInt(t/60); 
    var s = parseInt(t) % 60; 

    if (s < 10) { 
     s = "0" + s; 
    } 
    $scope.timeView = m+":"+s; 
    } 

    $scope.stopStart = function() { 
    if (tDiv.hasClass('working')) { 
     $scope.toggleClass(); 
     clearInterval(intrvl); 
     $('#QwkBreak a').text('Continue Working');  //////////////////////Should I remove jQuery?///////////////////////// 
    } else if (t<1500) {   // prevents timer from starting when '#QwkBreak' is clicked, unless timer has started counting down // 
     $('#QwkBreak a').text('Quick Break'); 
     $scope.interval(); 
     $scope.toggleClass(); 
    } 
    } 

    $scope.toggleClass = function() { 
    tDiv.toggleClass('notWorking working'); 
    } 

    $scope.resetTimer = function() { 
    if (!tDiv.hasClass('notWorking')) {   //prevents reset button from toggling classes unless (class="working") // 
     clearInterval(intrvl); 
     t = 1500; 
     tDiv.text("25:00"); 
     $scope.toggleClass(); 
    } 
    } 

// })();s 
}]); 




<body ng-controller="app.controller"> 
    <h1>Pomodoro Timer</h1> 
    <div id="timeView"> 
    <p id="time" class="notWorking">{{ timeView }}</p> 
    </div> 
    <div id="controls"> 
     <button id="startWork"><a ng-click="startTimer()" href="#">Start Work</a></button> 
     <button id="QwkBreak"><a ng-click="stopStart()" href="#">Quick Break</a></button> 
     <button id="reset"><a ng-click="resetTimer()" href="#">Reset</a></button> 
     <button id="5_MInBreak">5-Min Break</button> 
    </div> 
    </div>

источник

2015-07-25 Anthony D

Не делать манипуляции DOM в контроллере. Класс CSS должен исходить из модели. И используйте $ interval. –

Угловая имеет $interval сервис, который внутренне будет управлять дайджестов, а также позволяет легко избавиться от таймеров с использованием cancel() метода

$scope.interval = function() { 
    intrvl = $interval(function(){ 
    t -= 1; 
    $scope.displayTime(t) 
    },1000) 
    }

Теперь вы также хотите удалить этот таймер интервала из окна, когда сфера является уничтожены

$scope.$on('$destroy', function(){ 
    intrvl.cancel(); 
});

вам нужно будет вводить $interval в контроллер также

Также предположим, что весь этот связанный с таймером код должен быть помещен в директиву. Контроллеры не должны иметь какой-либо связанные с DOM-кода в них

Ссылка: $interval docs

источник

2015-07-25 17:15:16 charlietfl

Извините, на это потребовалось столько времени, чтобы ответить. Спасибо, это сработало. В конце концов я остановил интервал: (_ $ interval.cancel ($ scope.intrvl); _). Как это отличается от вашего предложения? –

Обновление вида с интервалом $

ответ

Смежные вопросы