我正在使用 AngularJS 支持的页面，并且我需要在只读输入文本字段内显示正在运行的时钟（与data-ng-model)。为了模拟运行的时钟，我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数，该函数会更新 $scope'd 属性值，该值又绑定到该输入文本字段。不知何故，输入字段中的值没有得到更新。所以我放置了一个<pre />标签并使用 jQuery 选择器更新其内容。这工作正常，所以我需要帮助获取输入文本字段值，以便每秒更新一次。
我已经设置了一个jsFiddle https://jsfiddle.net/webuser7/0qdb621e/对于这个例子。
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 应用程序模块和控制器声明如下：
(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()或有角的$timeout反映由于 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 https://jsfiddle.net/0qdb621e/30/对于 $scope.$apply()
使用$超时（不要忘记将其注入控制器）
(function updateCDT() {
$scope.formData.currentDateTime = new Date().toString();
document.getElementById("currentDateTime").innerHTML
= $scope.formData.currentDateTime;
$timeout(updateCDT, 1000);
})();
fiddle https://jsfiddle.net/0qdb621e/26/$超时
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
