我有这个非常简单的模板:
{{ 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将确保它永远不会与其他冲突
运行摘要循环