強制AngularJS在html端重新載入更新後的值

我有一個計時器，我正在寫作AngularJS中的第一個應用程序。我一直在試圖自我教導自己，但我相信在建立我的模型方面可能存在根本性的脫節。雖然我可以通過我的console.log打印輸出在Web控制檯中看到更新的值，但是html側的定時器並未顯示爲更新。強制AngularJS在html端重新載入更新後的值

var myApp = angular.module('countdownTimer', []); 
 

 

 
myApp.service('timerService',['$http','$timeout', function($http, $timeout){ 
 
\t var time = 180; 
 
\t var self = this; 
 

 
\t this.getPrettyTime = function(){ 
 
\t \t var minutes = time/60; 
 
\t \t var seconds = time - minutes * 60; 
 
\t \t if (seconds < 10){ 
 
\t \t \t myDateObject.date = minutes + ":0" + seconds; \t 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t myDateObject.date = minutes + ":" + seconds; 
 
\t \t } 
 
\t \t return myDateObject; 
 
\t } 
 
\t 
 
\t var myDateObject = { 
 
\t \t date: null 
 
\t } 
 
\t var onTimeout = function() { 
 
\t \t time = time - 1; 
 
\t \t if (time > 0){ 
 
\t \t \t console.log(time); 
 
\t \t \t mytimeout = $timeout(onTimeout, 1000); 
 
\t \t \t 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t time = 180; \t \t \t 
 
\t \t \t mytimeout = $timeout(onTimeout, 1000); 
 
\t \t } 
 
\t } 
 
\t this.start = function() { 
 
\t \t 
 
\t \t $timeout(onTimeout, 1000); 
 
\t } 
 

 
\t 
 
}]); 
 

 
myApp.controller('CounterController', ['$timeout','$scope', 'timerService', function($timeout, $scope, timerService){ 
 
\t /**$scope.counter = 180; 
 
\t **/ 
 
\t //var date = new Date(null); 
 
\t //date.setSeconds(timerService.getTime()); 
 
\t $scope.myDateObject = timerService.getPrettyTime(); 
 
\t 
 
\t 
 
\t $scope.start = function(){ 
 
\t \t timerService.start(); 
 
\t 
 
\t } 
 
\t 
 
\t $scope.stop = function(){ 
 
\t \t $timeout.cancel(mytimeout); 
 
\t } 
 
\t 
 
\t 
 
}]);

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title> Example </title> 
 
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 
\t <script src="app2.js"></script> 
 
</head> 
 
\t 
 
<body data-ng-app="countdownTimer"> 
 
\t <div data-ng-controller="CounterController"> 
 
\t \t {{myDateObject.date}} 
 
\t \t <button data-ng-click="stop()">Stop</button> 
 
\t \t <button data-ng-click="start()">Start</button> 
 
\t </div> 
 
\t </body> 
 
</html>

正如你可以在上面的例子中看到，計時器沒有更新的網頁。我的邏輯是否有斷開（我是新來的角，所以我很想知道我出錯的地方）還是我誤解了角度功能？

感謝

來源

2017-07-19 sudobangbang

從你的代碼我可以告訴沒有什麼更新'myDateObject'，你需要一個代碼來更新這個值，但是你的邏輯設計看起來沒有希望去做 – codtex

同意@codtex。我花了很多時間試圖使它適用於現有的代碼，但看起來不太可行。研究一下重構過程，以便可以根據服務更改在控制器中更新myDateObject。 – Kevin

首先，在getPrettyTime你需要做的：

var minutes = Math.floor(time/60);

否則你會得到一個浮點數。

之後，你需要每一個你的時間更新時間打電話給你getPrettyTime功能，這樣你就可以在你的onTimeout功能這樣做：

var onTimeout = function() { 
    time = time - 1; 
    self.getPrettyTime(); 
    ...

這裏是一個工作片段：

var myApp = angular.module('countdownTimer', []); 
 

 

 
myApp.service('timerService', ['$http', '$timeout', function($http, $timeout) { 
 
    var time = 180; 
 
    var self = this; 
 

 
    self.getPrettyTime = function() { 
 
    var minutes = Math.floor(time/60); 
 
    var seconds = time - minutes * 60; 
 
    if (seconds < 10) { 
 
     myDateObject.date = minutes + ":0" + seconds; 
 
    } else { 
 
     myDateObject.date = minutes + ":" + seconds; 
 
    } 
 
    return myDateObject; 
 
    } 
 

 
    var myDateObject = { 
 
    date: null 
 
    } 
 
    var onTimeout = function() { 
 
    time = time - 1; 
 
    self.getPrettyTime(); 
 
    if (time > 0) { 
 
     console.log(time); 
 
     mytimeout = $timeout(onTimeout, 1000); 
 

 
    } else { 
 
     time = 180; 
 
     mytimeout = $timeout(onTimeout, 1000); 
 
    } 
 
    } 
 
    this.start = function() { 
 

 
    $timeout(onTimeout, 1000); 
 
    } 
 

 

 
}]); 
 

 
myApp.controller('CounterController', ['$timeout', '$scope', 'timerService', function($timeout, $scope, timerService) { 
 
    /**$scope.counter = 180; 
 
    **/ 
 
    //var date = new Date(null); 
 
    //date.setSeconds(timerService.getTime()); 
 
    $scope.myDateObject = timerService.getPrettyTime(); 
 

 

 
    $scope.start = function() { 
 
    timerService.start(); 
 

 
    } 
 

 
    $scope.stop = function() { 
 
    $timeout.cancel(mytimeout); 
 
    } 
 

 

 
}]);

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title> Example </title> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 
    <script src="app2.js"></script> 
 
</head> 
 

 
<body data-ng-app="countdownTimer"> 
 
    <div data-ng-controller="CounterController"> 
 
    {{myDateObject.date}} 
 
    <button data-ng-click="stop()">Stop</button> 
 
    <button data-ng-click="start()">Start</button> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-19 14:25:13 JeanJacques

謝謝！我只是想出了自己的想法，並打算髮布類似的解決方案，但你的看起來更優雅！乾杯。 – sudobangbang

@sudobangbang你也應該考慮使用$ interval而不是$ timeout https://docs.angularjs.org/api/ng/service/$interval –

強制AngularJS在html端重新載入更新後的值

回答

相關問題