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

【问题标题】：How to update DOM when value changes in controller控制器中的值更改时如何更新DOM
【发布时间】：2016-04-21 09:46:31
【问题描述】：

我有一个 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>

【问题讨论】：

标签： angularjs angularjs-scope angularjs-ng-model ng-bind

【解决方案1】：

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

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

您应该使用$interval 而不是setInterval

$interval($scope.getData, 1000);

【讨论】：