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

Question

我正在使用一个 AngularJS 强大的页面，我需要在只读输入文本字段中显示一个运行时钟（与 data-ng-model) 双向绑定）。模拟一个运行时钟，我使用 JavaScript 调度程序和 setTimeout 每 1000 毫秒调用一个函数，它更新 $scope'd 属性值，这反过来是绑定到该输入文本字段。不知何故，输入字段中的值没有得到更新。所以我放置了一个 <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应用模块和控制器声明如下：

(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);
        })();
    });
})();

Answer 1

您需要使用 $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 对于 $scope.$apply()

使用 $timeout（不要忘记将其注入控制器）

 (function updateCDT() {
            $scope.formData.currentDateTime = new Date().toString();
            document.getElementById("currentDateTime").innerHTML
    = $scope.formData.currentDateTime;
            $timeout(updateCDT, 1000);
          
        })();

fiddle $timeout

Answer 2

如果您像使用 setTimeout 一样修改 angular 之外的范围，您需要调用 $scope.$apply.

Answer 3

您可以使用 $timeout() 而不是使用 setTimeout()，它将在内部调用 $apply()，从而告诉 angular 到运行摘要。

记得注入$timeout作为依赖

DEMO

Answer 4

和pre标签一样做:

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

希望对您有所帮助！

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

AngularJS Input field not updating from setTimeout inside controller

html

javascript

jquery

settimeout

angularjs