我有这个非常简单的模板:

{{ polygonDotsCount }}


而此代码在控制器上:

$scope.polygonDotsCount = 0;
$scope.polygonClick = function() {
    $scope.polygonDotsCount = $scope.polygonDotsCount + 1;
    console.log($scope.polygonDotsCount);
};


每当我单击地图时,就会调用polygonClick,并且控制台中的数字增加了,但是模板上的数字却没有增加!这可能是什么问题?

最佳答案

当您在点击Google Map事件时更新范围变量polygonDotsCount时,代码将运行,但更改后的范围变量永远不会在html上更新。因为摘要循环不会运行。为了更新,所有绑定摘要循环必须具有。如果您在角度上下文内执行任何操作,将正确应用摘要循环并更新html上的绑定。但是,当您运行诸如onclick之类的任何事件或诸如您正在使用Google Map事件之类的外部事件时,它们将永远不会运行摘要周期。在这种情况下,您需要手动运行它。

When to run $apply

要手动运行摘要循环,您需要调用$apply()scope方法,该方法将运行$digest()方法并更新所有绑定。但是直接调用$apply()运行digest循环会引起问题,因为您有时会在运行摘要循环时发生,并且如果当前已经在运行摘要循环,那么它将引发错误,提示$digest is already in progress

所以最好使用$timeout

什么$ timeout呢?

它实际上运行一个digest周期,但是它有一个优点。当您在$timeout函数中编写代码时,它将被执行并运行摘要循环。但是,在运行该摘要循环时,先前正在运行的digest正在进行中,然后等待该摘要循环结束,然后在该摘要完成后执行,它将运行自己的摘要循环。



$scope.polygonDotsCount = 0;
$scope.polygonClick = function() {
    $timeout(function(){ //<-- inject $timeout on controller before using it.
         $scope.polygonDotsCount = $scope.polygonDotsCount + 1;
         console.log($scope.polygonDotsCount);
    });
};



  使用$ timeout将确保它永远不会与其他冲突
  运行摘要循环

10-06 04:34
查看更多