Question

我使用angularjs通过使用ng-controller自动更改简单html文件中的时间，但它仅显示初始时间但未稍后更新

这是index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Testing</title>

</head>
<body ng-app="myapp">

<div ng-controller="myctrl">
    <h1>{{data()}}</h1>
</div>
<script TYPE="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

和main.js

var app=angular.module('myapp',[]);
app.controller("myctrl",function($scope)
{
$scope.data=function()
{
    var d = new Date();
    var n = d.getTime();
    return n;
}
})

如何每次都更新？？

Answer 1

你永远不会更新$ scope.data，Angular不会为你做这件事。

var timeout;
var changeTime=function(){
    $scope.data = (new Date()).getTime();
    timeout = $timeout(changeTime,1000);
}
timeout= $timeout(changeTime,1000);

Answer 2

data()仅在编译模板时获得rand。您需要使用计时器来更新值。这样的事情会起作用。

html模板

<div ng-controller="timer" ng-app>
    {{time | date:'h:m:ss'}}
</div>

控制器

function timer($scope, $interval){
    $scope.time = Date.now();
    $interval(function(){
       $scope.time = Date.now(); 
    },1000);
}

此外，您可以使用Date.now()代替(new Date()).getTime()

Answer 3

在此示例中，您只调用一次数据。要让它实时更新，您需要像这样连续调用日期：

var app=angular.module('myapp',[]);
app.controller("myctrl",function($scope, $timeout)
{

  // called every second
  var getTime = function(){
    $scope.data = (new Date()).getTime();
    $timeout(getTime, 1000, true);
  }

  getTime();
})

在您的视图中，只需删除data（）调用，然后引用模型：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Testing</title>

</head>
<body ng-app="myapp">

<div ng-controller="myctrl">
    <h1>{{data}}</h1>
</div>
<script TYPE="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

时间不会自动改变

3 个答案: