переменная области обновления только в первый раз

Question

У меня очень странная проблема, я использую угловые js для создания секундомера, я использую следующий код для обновления таймера.

$scope.seconds = $scope.minutes = $scope.hours = "00"; 

$scope.timer = { 
    h: 0, 
    m: 0, 
    s: 0 
}; 

$scope.runTimer = function() { 
    console.log($scope.timer); 
    $scope.timer.s++; 
    if ($scope.timer.s >= 60) { 
     $scope.timer.s = 0; 
     $scope.timer.m++; 
     if ($scope.timer.m >= 60) { 
      $scope.timer.m = 0; 
      $scope.timer.h++ 
     } 
    } 

    $scope.seconds = $scope.timer.s > 9 ? "" + $scope.timer.s : "0" + $scope.timer.s; 
    $scope.minutes = $scope.timer.m > 9 ? "" + $scope.timer.m : "0" + $scope.timer.m; 
    $scope.hours = $scope.timer.h > 9 ? "" + $scope.timer.h : "0" + $scope.timer.h; 
    $scope.continueTimer(); 
}; 

$scope.continueTimer = function() { 
    setTimeout($scope.runTimer, 1000); 
}; 

Но проблема значение для области видимости переменных seconds, minutes & hours обновляется только в первый раз в представлении, то есть, когда метод runTimer запускается ng-click поэтому изменения шаблона из 00:00:00 в 00:00:01 и то не обновляет ..

с помощью консоли, я проверил, что значение $scope.seconds, $scope.minutes & $scope.hours обновляется должным образом, но вид не reflecti Правильное значение.

Описание: plunker, показывая точную проблему, с которой я столкнулся. Любая помощь будет оценена. Благодарю.

Answer 1

Использование $scope.$digest() и проверить !$scope.$$phase до того $scope.$digest()

if(!$scope.$$phase) 
      { 
       $scope.$digest(); 
      } 

Так что ваш код app.js файл должен выглядеть

var app = angular.module('plunker', []); 

    app.controller('MainCtrl', function($scope) { 
     $scope.seconds = $scope.minutes = $scope.hours = "00"; 

     $scope.timer = { 
      h: 0, 
      m: 0, 
      s: 0 
     }; 

     $scope.runTimer = function() { 
      console.log($scope.timer); 
      $scope.timer.s++; 
      if ($scope.timer.s >= 60) { 
       $scope.timer.s = 0; 
       $scope.timer.m++; 
       if ($scope.timer.m >= 60) { 
        $scope.timer.m = 0; 
        $scope.timer.h++ 
       } 
      } 

      $scope.seconds = $scope.timer.s > 9 ? "" + $scope.timer.s : "0" + $scope.timer.s; 
      $scope.minutes = $scope.timer.m > 9 ? "" + $scope.timer.m : "0" + $scope.timer.m; 
      $scope.hours = $scope.timer.h > 9 ? "" + $scope.timer.h : "0" + $scope.timer.h; 
      **if(!$scope.$$phase) 
      { 
       $scope.$digest(); 
      }** 
      $scope.continueTimer(); 

     }; 

     $scope.continueTimer = function() { 
      setTimeout($scope.runTimer, 1000); 
     }; 
    }); 

Смотрите эту работу plunker