javascript - 超时调用时， Angular 双向绑定(bind)不起作用

Question

所以我有一个 HTML 模板，里面有以下 Angular 表达式 {{player.score}}。存储在范围对象中的玩家的初始分数在表达式的位置正确呈现。

现在，我点击了一个按钮，需要更新该分数。如果我使用硬编码值简单地更新玩家分数，它会正常工作:

$scope.updateScore = function (){
     $scope.player.score = 1000; //this is updated without any issues
};

但我的问题是我的球员得分是一个复杂的计算，需要我使用_.defer。因此，当我将之前的代码(用于测试)包装在 _.defer 中时，它不起作用:

 $scope.updateScore = function (){
         _.defer(function() {
              $scope.player.score = 5000; //this is not updated...
         });
    };

我对 _.defer 的理解是它只是 setTimeout 的下划线包装器。我希望在 _.defer 使用任何延迟之后，当它最终开始更新分数时，由于 Angular 双向绑定(bind)，它会反射(reflect)在 HTML 中。

但这不仅在使用 _.defer 时发生，否则它会按预期工作。 _.defer 也在更新 Angular 对象，因为如果我在延迟代码中执行 console.log(player.score)，那么在控制台中几秒钟后我请务必查看更新分数 (5000)。

任何 Angular/Javascript 专家都可以帮助我理解我做错了什么以及如何解决它。请注意，由于各种技术/遗留原因，删除 _.defer 并不是一个真正的选择。

我只是想弄清楚为什么当对象以延迟方式更新时，Angular 不更新 View 。

非常感谢任何指点。

Answer 1

Angular 并不“知道”这个延迟，所以即使值得到更新，它也不会出现在 View 中，直到下一个摘要循环。 你可以注入(inject) $timeout到你的 Controller 并像这样使用它:

_.defer(function() {
     $timeout(function() {
          $scope.player.score = 5000; //this is not updated...
     });
});

您还应该阅读有关延迟对象的 Angular (https://docs.angularjs.org/api/ng/service/ $q)