Jim*_*nis 2 javascript angularjs
编辑://修复...和//下面代码中的错误评论显示答案
对于JavaScript专家来说,这可能是一件愚蠢而且显而易见的事情......但如果我能看到这一点,我将会受到威胁.
这是我的t.js:
var angularApp = angular.module('myApp', []);
angularApp.controller('mainController', ['$scope', '$http', '$log',
function ($scope, $http, $log) {
$scope.version = angular.version;
var ctime = new Date();
$scope.ctime = ctime.getTime() / 1000;
$http.get('http://127.0.0.1:8765/').then(
function(res){
$scope.stime = res['data']['server-time'] / 1000;
// Fix goes here: $scope.skew = $scope.stime - $scope.ctime;
},
function(error){
$log.warn('Unable to get time');});
// Error here: this happens asynchronously to the $http.get!
$scope.skew = parseFloat($scope.stime) - parseFloat($scope.ctime);
}]);
...和我的HTML:
<!DOCTYPE html>
<html lang="en-us" data-ng-app="myApp"><head><title>Time Skew</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head><body>
<header><nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a></div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
</ul></div></nav></header>
<div class="container">
<div data-ng-controller="mainController">
<div class="ng-cloak">Browser time: {{ctime}}</div>
<div class="ng-cloak">Server time: {{stime}}</div>
<div class="ng-cloak">Time skew: {{skew}}</div></div></div>
<script src="//code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="t.js"></script>
</body></html>
......这里,大致显示了什么:
Browser time: 1445735550.067
Server time: 1445735550.085
Time skew: NaN
运行此操作时,Chrome浏览器的开发人员工具JavaScript控制台上不会显示任何内容.(在本研究期间,我在其中看到了很多其他类似错误的活动...所以我知道它确实显示了我的语法错误,依赖注入失败等等 - 当它们出现时).
我在使用和不使用parseFloat()的情况下尝试了这个.(同样,对class ="ng-cloak"的调用是相关的......将它们取出虽然它们没有按预期工作但没有效果).我从*/1000*(divisions)表达式中获得所需浮点表示的事实表明它们在代码中的这两个点处被视为数字.我试过删除除法并使用parseInt()而不是parseFloat().
(虽然我不认为这与这个问题有关,但是提供这种时间服务的node.js"应用程序":
// tserver.js:
var http = require("http");
http.createServer(function (req, response) {
var headers = {
'Content-Type:': 'application/json',
// Extra headers suggested by http://stackoverflow.com/a/29548846/149076
// ... to resolve: "Control-Allow-Origin' header is present on the requested resource"
// error from Angular.js $http.get() ...
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Origin': '*'
};
response.writeHead(200, headers);
var d = new Date();
response.end(JSON.stringify({ 'server-time': d.getTime() }));
}).listen("8765");
...虽然似乎很明显我从我的"服务"获得了一个有效的整数(或者应该解析为整数的字符串).(HTML中显示的值与几毫秒内"ctime"的值一致).
当我发布这个问题时,我发现了一些关于JavaScript NaN结果的其他问题......这些似乎都不适用于此.我甚至尝试添加$ scope.tst = parseFloat('12345.97') - parseFloat('12345.67'); 并将其添加到我的HTML中并获得了完全可预测的数值结果......我实际使用了这些全长数字,如此处所示,以确保数字大小不是一些奇怪的问题.我也尝试在$ scope.Xtime变量上调用".toString()".
那我在这里错了什么？
$http是异步的,您尝试parseFloat在请求完成之前使用不存在的变量
将您的计算放在promise回调中
$http.get('http://127.0.0.1:8765/').then(function (res) {
$scope.stime = res['data']['server-time'] / 1000;
// can do calc here
$scope.skew = parseFloat($scope.stime) - parseFloat($scope.ctime);
},function (error) {
$log.warn('Unable to get time');
});
| 归档时间： |
|
| 查看次数： |
2187 次 |
| 最近记录： |