當使用超時調用時，角度雙向綁定不起作用

Question

所以我有一個HTML模板，其中我有以下角度表達式{{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使用的任何延遲_.defer ，當它最終更新得分時，由於Angular雙向綁定，它將反映在HTML中。

但是只有在使用_.defer時_.defer發生這種情況，否則它會按預期工作。 另外_.defer正在更新Angular對象，因為如果我在延遲代碼中執行console.log(player.score) ，那么在控制台中幾秒后我會看到更新分數（5000）。

任何有角度/ Javascript專家都可以幫助我理解我做錯了什么以及如何解決它。 請注意，由於各種技術/遺留原因，刪除_.defer並不是一個真正的選擇。

我只想弄清楚為什么當對象以延遲方式更新時，Angular不會更新視圖。

任何指針都非常感謝。

Answer 1

Angular不會“知道”這個延遲，因此即使值更新，它也不會出現在視圖中，直到下一個摘要循環。 您可以向控制器注入$ timeout並像這樣使用它：

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

您還應該閱讀有關角度的延遲對象（ https://docs.angularjs.org/api/ng/service/ $ q）

Answer 2

_.defer將代碼從角度摘要的范圍中取出，因為它在內部調用setTimeout 。

您需要手動啟動延遲函數內的摘要，以便在該點使用$ scope重新綁定。$ apply ：

$scope.updateScore = function (){
     _.defer(function() {
          player.score = 5000;
          $scope.$apply();
     });
};

或者您需要將回調保留在角度范圍內，可能是使用$timeout （但記得在控制器/指令中注入$timeout ）：

$scope.updateScore = function (){
     $timeout(function() {
          player.score = 5000;
     }, 1); // or 0, but _.defer passes 1
};

我會選擇優先選項2，我個人無法看到如何使用_.defer ，但當然這取決於你。