强制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端重新载入更新后的值

回答

相关问题