AngularJS $ scope在回調函數中不會更新嗎？

Question

我有這個簡單的代碼片段：

HTML：

<div ng-app="myApp" ng-controller="SampleController"> 
    <p>{{val1}}</p> 
    <p>{{val2}}</p> 
    <input type="button" value="Update" ng-click="update()" /> 
</div> 

的Javascript：

var app = angular.module('myApp', []); 

app.controller('SampleController', ['$scope', function($scope) { 

    $scope.val1 = "Not updated"; 
    $scope.val2 = "Not updated"; 

    $scope.update = function() { 
     $scope.val1 = "Updated outside!"; 

     setTimeout(function() { 
      $scope.val2 = "Update inside!"; 
     }, 1); 
    }; 
}]); 

片段也jsfiddle。

如果我點擊更新按鈕，只有val1值在html中更新。如何解決這個問題？但最重要的是，爲什麼會發生這種情況？

PS： setTimeout只是簡化了問題。事實上，問題是關於任何具有回調函數的自定義組件。

Answer 1

setTimeout不會觸發摘要循環，所以不會更新視圖。 Angular帶有一個內置的$timeout模塊 - 使用該模塊將執行一個摘要循環，並且您的視圖將會更新。

要使用：

app.controller('SampleController', ['$scope', '$timeout', function($scope, $timeout) { 
    $timeout(function() { $scope.val2 = "see?" }, 5000); 
}]);