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

Question

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

Web*_*ser 8 html javascript jquery settimeout angularjs

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

A.B*_*A.B 10

你需要使用$scope.$apply()或者角度$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);

Run Code Online (Sandbox Code Playgroud)

$ scope的小提琴.$ apply()

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

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

        })();

Run Code Online (Sandbox Code Playgroud)

$ timeout的小提琴

归档时间：	10 年，6 月前
查看次数：	2678 次
最近记录：	10 年，6 月前