如何在控制器中的值更改时更新 DOM

Question

我有一个函数 getData，它只是增加 var counter 的值。

每当发生增量时，我希望 angular 在 div

中自动更新它

我尝试过 ng-bind，但它只有在我单击表单元素时才有效。

enquire.controller('DisplayEnquiries', function($scope){
$scope.getData = function(){
    console.log('Run ' + $scope.counter);
    $scope.counter;
    if($scope.counter == undefined || $scope.counter == null){
        $scope.counter = 1
        $scope.counter++;
    }
    else{
        $scope.counter++;
    }
    console.log('Execute ' + $scope.counter);
    $scope.count = $scope.counter;
}
    setInterval($scope.getData, 1000);
});

HTML

<div class="col-sm-5" ng-controller="DisplayEnquiries">
        <h4>Unread User Queries</h4>
        <p>
            Count : <span ng-bind="count"></span>
        </p>
    </div>

Answer 1

Angular 确实有摘要系统，有助于提供更新的视图绑定。但是，当您从 angular 的外部世界更新 angular 绑定时，例如 any (async) event，angular 不理解更改，由此产生的摘要循环不会触发更新的绑定。因此，在您的情况下，您是运行 setInterval(async event) 正在更新绑定。

在这种情况下，您需要手动启动摘要循环 ($scope.$apply()/$scope.$digest()) 以在视图中相应地查找更改和更新绑定。但我仍然希望您使用开箱即用的 $interval 服务，它的工作与 setInterval 相同，并且确实负责摘要周期以保持绑定同步。

您应该使用 $interval 而不是 setInterval

$interval($scope.getData, 1000);

如何在控制器中的值更改时更新 DOM

How to update DOM when value changes in controller

angularjs

angularjs-scope

ng-bind

angularjs-ng-model