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

我正在使用AngularJS驱动的页面,我需要在只读输入文本字段中显示一个运行时钟(与data-ng-model绑定的双向).为了模拟正在运行的时钟,我使用带有setTimeout的 JavaScript调度程序每隔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);
        })();
    });
})();

解决方法

你需要使用$scope.$apply()或angulars $timeout来反映更改,因为setTimeout超出了angularjs的范围

使用$scope.$apply()

将$scope.$apply()应用于setTimeout(function(){},1000)的匿名函数中,然后调用实际函数,如下所示

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

使用$timeout(别忘了把它注入控制器)

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

fiddle为$timeout

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

解决方法

猜你在找的JavaScript相关文章