我正在使用 AngularJS 支持的页面，我需要在只读输入文本字段中显示运行时钟(与 data-ng-model) 双向绑定(bind)。为了模拟运行时钟，我正在使用 JavaScript 调度程序setTimeout 每 1000 毫秒调用一个函数，它更新 $scope'd 属性值，该属性值又绑定(bind)到该输入文本字段。不知何故，输入字段中的值没有得到更新。所以我放置了一个 <pre />标记并使用 jQuery 选择器更新其内容。这工作正常，所以我需要帮助让输入文本字段值也每秒更新一次。
我已经设置了一个 jsFiddle对于这个例子。
HTML 如下:
<body data-ng-app="formApp">
<div data-ng-controller="FormCtrl">
Current Date and Time <input type="text" data-ng-model="formData.currentDateTime" readonly="readonly" size="60" />
</div>
<pre id="currentDateTime" style="font-size:1.5em;">
</pre>
</body>
AngularJS 应用程序模块和 Controller 声明如下:
(function() {
var formApp = angular.module("formApp", []);
formApp.controller("FormCtrl", function ($scope) {
$scope.formData = {};
$scope.formData.currentDateTime = new Date().toString();
(function updateCDT() {
$scope.formData.currentDateTime = new Date().toString();
document.getElementById("currentDateTime").innerHTML = $scope.formData.currentDateTime;
setTimeout(updateCDT, 1000);
})();
});
})();
最佳答案
您需要使用 $scope.$apply() 或 angulars $timeout 来反射(reflect)更改，因为 setTimeout 超出了 angularjs 的范围
使用 $scope.$apply()
在 setTimeout(function(){},1000) 的匿名函数中应用 $scope.$apply() 然后像下面这样调用实际的函数
(function updateCDT() {
$scope.formData.currentDateTime = new Date().toString();
document.getElementById("currentDateTime").innerHTML
= $scope.formData.currentDateTime;
setTimeout(function(){
$scope.$apply();
updateCDT()
}, 1000);
fiddle对于 $scope.$apply()
使用 $timeout(不要忘记将其注入(inject) Controller )
(function updateCDT() {
$scope.formData.currentDateTime = new Date().toString();
document.getElementById("currentDateTime").innerHTML
= $scope.formData.currentDateTime;
$timeout(updateCDT, 1000);
})();
fiddle $超时
关于javascript - AngularJS 输入字段未从 Controller 内的 setTimeout 更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29719289/