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 app模块和控制器声明如下：

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

$ p范围内的{p> fiddle。$ 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()而不是使用$timeout()，而$apply()会在内部调用$timeout，从而告诉角色运行摘要。

请记住将{{1}}作为依赖项注入

的 DEMO

Answer 3

如果您使用setTimeout修改范围之外的范围，则需要调用$scope.$apply。

Answer 4

只需执行与pre标签相同的操作：

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

希望它有所帮助！

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

4 个答案: