Skip to main content
 首页 » 编程设计

angularjs之当 Controller 中的值发生变化时如何更新 DOM

2024年08月12日4softidea

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

请您参考如下方法:

Angular 确实有摘要系统,有助于在 View 上提供更新的绑定(bind)。但是,当您从 Angular 的外部世界(例如任何(异步)事件)更新 Angular 绑定(bind)时,Angular 无法理解更改,因此生成的摘要循环不会触发更新的绑定(bind)。因此,在您的情况下,您正在运行正在更新绑定(bind)的 setInterval(async event) 。

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

您应该使用$interval而不是setInterval

$interval($scope.getData, 1000);