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

Question

我有一个函数getData,它只增加var计数器的值.

每当发生增量时,我都希望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有digest系统,有助于在视图上提供更新的绑定.但是当你从角度的外部世界更新角度绑定时any (async) event,角度不理解变化,结果的摘要周期将不会触发更新的绑定.所以在你的情况下你正在运行setInterval(异步事件),它正在更新绑定.

在这种情况下,您需要手动启动摘要周期($scope.$apply()/ $scope.$digest())以查找更改并相应地在视图上更新绑定.但是我仍然希望你使用$interval开箱即用的服务,该服务做同样的工作setInterval,并且负责处理摘要周期以保持绑定同步.

你应该使用$interval而不是setInterval

$interval($scope.getData, 1000);