AngularJS输入字段不是从里面的setTimeout更新控制器 [英] AngularJS Input field not updating from setTimeout inside controller
问题描述
我与供电页的AngularJS工作，我需要显示只读输入文本字段内正在运行的时钟（绑定双向数据-NG-模型）。以模拟运行的时钟，我使用JavaScript调度与的setTimeout 来调用每1000毫秒的功能，这将更新这又被绑定到$ scope'd属性值该输入文本字段。不知怎的，在输入字段中的值不会得到更新。所以我放在＆LT; pre /＆GT; 标记和使用jQuery选择更新的内容。这是工作的罚款，所以我需要帮助获取输入文本字段值也得到每秒更新一次。
我已经设置了一个的jsfiddle 的这个例子。
的HTML是如下：
＆LT;车身数据-NG-应用=formApp＆GT;
＆LT; DIV数据-NG-控制器=FormCtrl＆GT;
当前日期和时间＆LT;输入类型=文本数据-NG-模式=formData.currentDateTime只读=只读大小=60/＆GT;
＆LT; / DIV＆GT;
＆LT; pre ID =currentDateTime的风格=FONT-SIZE：1.5em;＆GT;
＆LT; / pre＆GT;
＆LT; /身体GT;
在AngularJS应用模块和控制器声明如下：
（函数（）{
变种formApp = angular.module（formApp，[]）; formApp.controller（FormCtrl功能（$范围）{
$ scope.formData = {};
$ scope.formData.currentDateTime =新的日期（）的toString（）。 （函数updateCDT（）{
$ scope.formData.currentDateTime =新的日期（）的toString（）。
的document.getElementById（currentDateTime）的innerHTML = $ scope.formData.currentDateTime。
的setTimeout（updateCDT，1000）;
}）（）;
}）;
}）（）;
您需要使用 $范围。$适用（）或angulars $超时来体现的变化，因为是的setTimeout的angularjs范围
使用$范围。$适用（）
适用范围$。$适用（）setTimeout的匿名函数内（函数（）{}，1000），然后调用类的实际功能如下
（功能updateCDT（）{
$ scope.formData.currentDateTime =新的日期（）的toString（）。
的document.getElementById（currentDateTime）。innerHTML的
= $ scope.formData.currentDateTime;
的setTimeout（函数（）{
$ $范围适用于（）。
updateCDT（）
}，1000）;
小提琴为$ $范围。适用（）
使用$超时（不要忘记它注入到控制器）
（功能updateCDT（）{
$ scope.formData.currentDateTime =新的日期（）的toString（）。
的document.getElementById（currentDateTime）。innerHTML的
= $ scope.formData.currentDateTime;
$超时（updateCDT，1000）; }）（）;
小提琴为$超时
I am working with an AngularJS powered page, and I need to display a running clock inside a read-only input text field (two way bound with data-ng-model). To simulate a running clock, I am using a JavaScript scheduler with setTimeout to call a function every 1000 milliseconds, which updates the $scope'd property value which in turn is bound to that input text field. Somehow the value in the input field is not getting updated. So I placed a <pre /> tag and updated its content using a jQuery selector. That is working fine, so I need help getting the input text field value to also get updated every second.
I have set up a jsFiddle for this example.
The HTML is below:
<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>
The AngularJS app module and controller are declared as follows:
(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);
})();
});
})();
you need to use $scope.$apply() or angulars $timeout to reflect changes since setTimeout is outside the scope of angularjs
using $scope.$apply()
apply $scope.$apply() inside anonymous function of setTimeout(function(){},1000) and then call the actual function like below
(function updateCDT() {
$scope.formData.currentDateTime = new Date().toString();
document.getElementById("currentDateTime").innerHTML
= $scope.formData.currentDateTime;
setTimeout(function(){
$scope.$apply();
updateCDT()
}, 1000);
fiddle for $scope.$apply()
using $timeout (dont forget to inject it into controller)
(function updateCDT() {
$scope.formData.currentDateTime = new Date().toString();
document.getElementById("currentDateTime").innerHTML
= $scope.formData.currentDateTime;
$timeout(updateCDT, 1000);
})();
fiddle for $timeout
这篇关于AngularJS输入字段不是从里面的setTimeout更新控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
