調用回調函數後瀏覽器未呈現更新值

讀者的current_state應該增加1，然後讀者應該向右移動，然後再重複3次。

當我使用我的web檢查器運行程序時，我發現current_state在移動每一步之前確實增加了。但是，在我的瀏覽器窗口中，我只能在第一步中看到讀者的文本更改值。因此，當程序結束時，我在屏幕上的閱讀器文本中看到2，但讀者的current_state值實際上是5.

爲了讓我更加困惑，我正在修補，並隨機添加了一個按鈕空的點擊事件附加。點擊此按鈕將使current_state在屏幕上顯示爲閱讀者的文本。所以如果我在程序運行時反覆點擊這個按鈕，它看起來很完美。

我不是在尋找完全不同的方式來做到這一點，因爲這不是我的實際代碼，只是一個例子來說明問題。在我的代碼中，我試圖堅持使用角度和動畫後的遞歸回調函數，如果有可能解決這個問題。

在此先感謝，這一直讓我瘋狂！

https://jsfiddle.net/snookieordie/ns09cvqc/7/

var app = angular.module("turingApp", []); 

app.controller("turingController", ["$scope", function ($scope) { 
    $scope.reader = { 
     current_state: 1, 
    } 

    $scope.run_program = function() { 
     if($scope.reader.current_state < 5) { 
      $scope.reader.current_state++; 
      $(".reader").animate({"left": "+=50px"}, 1000, function() { 
       $scope.run_program(); 
      }); 
     } 
    } 
}]);

CSS：

.reader { 
    position: relative; 
    height: 50px; 
    width: 50px; 
    left: 0px; 
    font-size: 35px; 
    background-color: coral; 
}

HTML：

<body ng-app="turingApp" ; ng-controller="turingController"> 
    <div class="reader">{{reader.current_state}}</div> 
    <br/><br/> 
    <input type="button" class="code_submit" value="Run Code" ng-click="run_program()" /> 
    <br/><br/> 
    <input type="button" value="Empty Click Event" ng-click="" /> 
</body>

來源

2015-11-28 digglemister

嗯。是啊。我能夠重現這個問題。這裏是一個jsfiddle： https://jsfiddle.net/mckinleymedia/1v0kk9fj/ –

使用$scope.apply()只是動畫後回調函數被調用，下面我編輯js代碼

var app = angular.module("turingApp", []); 

app.controller("turingController", ["$scope", function($scope) { 

    $scope.reader = { 
    current_state: 1, 
    } 

    $scope.run_program = function() { 

    if ($scope.reader.current_state < 5) { 

     $scope.reader.current_state++; 
     $(".reader").animate({"left": "+=50px"}, 1000, function() { 
     $scope.run_program(); 
     $scope.$apply(); // Have added this line onlye 
     }); 
    } 
    } 

}]);

爲什麼這是必需的？實際上角度有watchers概念和當你正在做這種複雜的功能watchers需要保持深入的眼睛上的變化的變化，這是不存在自動實現速度，但可以手動添加/增強。

來源

2015-11-28 19:07:20

令人驚歎的，謝謝！出於好奇，你知道爲什麼觸發空的點擊事件具有更新變量更改的效果嗎？ – digglemister

有一個'watchers'的概念。他們正在觀看發生的任何變化或事件。所以當你點擊DOM文檔的任何地方[在瀏覽器中]這是一個事件。 Angular快速重新生成完整的DOM。當您的代碼更新變量時，觀察者不會檢測到觸發的任何更改或事件。 –

調用回調函數後瀏覽器未呈現更新值

回答

相關問題