AngularJS - 網頁未更新

我正在嘗試學習AngularJS。請多多包涵。AngularJS - 網頁未更新

目前，我正在嘗試創建一個倒數計時器，以更新基於給定時間間隔的網頁。

下面是HTML文件：

<!DOCTYPE html> 
<html ng-app="timer_module"> 
<head> 
    <meta charset="utf-8"></meta> 
    <link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"></link> 
</head> 

<body ng-controller="TimerController as controller"> 

    {{"D:" + controller.days + " H:" + controller.hours + " M:" + controller.minutes + " S:" + controller.seconds}} 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script> 
    <script src="js/timer-module.js"></script> 
</body> 

</html>

我的JS：

angular.module("timer_module", []) 
.controller("TimerController", function() { 

    var target_date = new Date('Jan, 31, 2017').getTime(); 

    var days = 0; 
    var hours = 0; 
    var minutes = 0; 
    var seconds = 0; 
    var controller = this; 

    setInterval(function() { 
     var currentDate = new Date().getTime(); 
     var secondsLeft = (targetDate - currentDate)/1000; 

     days = parseInt(secondsLeft/86400); 
     secondsLeft = secondsLeft % 86400; 

     hours = parseInt(secondsLeft/3600); 
     secondsLeft = secondsLeft % 3600; 

     minutes = parseInt(secondsLeft/60); 
     seconds = parseInt(secondsLeft % 60); 

     controller.days = days; 
     controller.hours = hours; 
     controller.minutes = minutes; 
     controller.seconds = seconds; 

     console.log(controller.days); 
     console.log(controller.hours); 
     console.log(controller.minutes); 
     console.log(controller.seconds); 
     console.log("---------------------"); 
    }, 1000); 

});

基於控制檯日誌，定時器工作。但是，網頁值不會更新。

來源

2016-03-03 Michael Ardan

你可以設置一個plunkr？ –

功能setInterval不觸發digest cycle的角度範圍。

相反的setInterval，你可以用角模擬$interval：

$interval(function() { 
     // skipped 
    }, 1000);

來源

2016-03-03 08:04:41

使用折角

的$間隔服務的setInterval將不刷新控制器

https://docs.angularjs.org/api/ng/service/$interval

來源

2016-03-03 08:04:15

使用$interval服務，您可以做到這一點。

angular.module("timer_module", []) 
 
    .controller("TimerController", function($interval) { 
 

 
    var target_date = new Date('Jan, 31, 2017').getTime(); 
 

 
    var days = 0; 
 
    var hours = 0; 
 
    var minutes = 0; 
 
    var seconds = 0; 
 
    var controller = this; 
 

 
    $interval(function() { 
 
     var currentDate = new Date().getTime(); 
 
     var secondsLeft = (target_date - currentDate)/1000; 
 

 
     days = parseInt(secondsLeft/86400); 
 
     secondsLeft = secondsLeft % 86400; 
 

 
     hours = parseInt(secondsLeft/3600); 
 
     secondsLeft = secondsLeft % 3600; 
 

 
     minutes = parseInt(secondsLeft/60); 
 
     seconds = parseInt(secondsLeft % 60); 
 

 
     controller.days = days; 
 
     controller.hours = hours; 
 
     controller.minutes = minutes; 
 
     controller.seconds = seconds; 
 

 
     console.log(controller.days); 
 
     console.log(controller.hours); 
 
     console.log(controller.minutes); 
 
     console.log(controller.seconds); 
 
     console.log("---------------------"); 
 
    }, 1000); 
 

 
    });

<!DOCTYPE html> 
 
<html ng-app="timer_module"> 
 

 
<head> 
 
    <meta charset="utf-8"></meta> 
 
    <link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"></link> 
 
</head> 
 

 
<body ng-controller="TimerController as controller"> 
 

 
    {{"D:" + controller.days + " H:" + controller.hours + " M:" + controller.minutes + " S:" + controller.seconds}} 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script> 
 
</body> 
 

 
</html>

來源

2016-03-03 08:06:57 Sender

AngularJS - 網頁未更新

回答

相關問題