javascript - Angularjs $scope 值未更新

Question

好的，我有以下 HTML:

<timer countdown="30" interval="1000">
{{seconds}}
percent
</timer>
{{timerSeconds}}

为此，我有以下 Controller 代码:

$scope.timerRunning = true;
$scope.timerSeconds = 100;
$scope.$on('timer-tick',function(e, val) {
    $scope.timerSeconds = (Math.floor(val.millis / 1000) / 30 * 100);
});

但是 View timerSeconds 没有更新。我通过调试验证了该事件，发现它正在执行函数并更改 timerSeconds 值。

Answer 1

在这一行之后:

$scope.timerSeconds = (Math.floor(val.millis / 1000) / 30 * 100);

添加

$scope.apply();

这样 AngularJS 检查模型是否有变化并重新渲染它们。

在许多情况下，AngularJS 无法检测到模型更改，尤其是在 Asynch 函数中，例如 $on()

阅读更多相关信息:When to use $scope.$apply()

如果不行，使用 AngularJS 的 $timeout 函数

$scope.$on('timer-tick',function(e, val) {
    $timeout(function(){
      $scope.timerSeconds = (Math.floor(val.millis / 1000) / 30 * 100);
    })
});