Javascript AngularJS输入字段未从控制器内的setTimeout更新_Javascript_Jquery_Html_Angularjs_Settimeout

Javascript AngularJS输入字段未从控制器内的setTimeout更新

javascript jquery html angularjs

Javascript AngularJS输入字段未从控制器内的setTimeout更新,javascript,jquery,html,angularjs,settimeout,Javascript,Jquery,Html,Angularjs,Settimeout,我正在使用AngularJS支持的页面，我需要在只读输入文本字段中显示一个正在运行的时钟（双向绑定数据ng模型）。为了模拟一个正在运行的时钟，我使用一个带有setTimeout的JavaScript调度程序，每1000毫秒调用一个函数，它更新$scope'd属性值，该属性值又绑定到该输入文本字段。不知何故，输入字段中的值没有得到更新。因此，我放置了一个标记，并使用jQuery选择器更新了它的内容。这很好，所以我需要帮助获取输入文本字段值，以便每秒更新一次我为这个例子建立了一个模型 HTML格式

我正在使用AngularJS支持的页面，我需要在只读输入文本字段中显示一个正在运行的时钟（双向绑定

数据ng模型）

。为了模拟一个正在运行的时钟，我使用一个带有

setTimeout

的JavaScript调度程序，每1000毫秒调用一个函数，它更新$scope'd属性值，该属性值又绑定到该输入文本字段。不知何故，输入字段中的值没有得到更新。因此，我放置了一个

标记，并使用jQuery选择器更新了它的内容。这很好，所以我需要帮助获取输入文本字段值，以便每秒更新一次

我为这个例子建立了一个模型

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>

您需要使用

$scope.$apply（）

或angulars

$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);

对于$scope.$apply（）

使用$timeout（别忘了将其注入控制器）

对于$timeout

如果您在angular之外修改作用域，如使用setTimeout，则需要调用

$scope.$apply
而不是使用setTimeout（）
，您可以使用$timeout（）
来在内部调用$apply（）
，从而告诉angular运行摘要
只需记住作为依赖项注入$timeout

只需执行与pre标记中相同的操作：
document.getElementById("input-field").value=$scope.formData.currentDateTime;

希望有帮助
 我将$timeout
注入控制器并使用它，因为它看起来更干净，而且Chrome开发者工具在使用$scope.$apply（）时显示了一个错误错误：[$rootScope:inprog]$apply已经在进行中。谢谢你的及时帮助！Chrome Developer Tools在使用$scope.$apply（）时显示错误错误：[$rootScope:inprog]$apply已在进行中
，所以我使用了$timeout
@WebUser你可以使用如果（！$scope.$$phase）{//call$apply}@WebUser，或者你可以在setTimeout的匿名函数（function（）{$scope.$apply（）；updatedt（）}，1000）中应用$scope.$apply（），然后调用实际的函数我想我可以这样做，但是我想用AngularJS的方式：-）谢谢你的建议。
 (function updateCDT() {
            $scope.formData.currentDateTime = new Date().toString();
            document.getElementById("currentDateTime").innerHTML
    = $scope.formData.currentDateTime;
            $timeout(updateCDT, 1000);
          
        })();

document.getElementById("input-field").value=$scope.formData.currentDateTime;