Wird der AngularJS $ -Scope in Callback-Funktionen nicht aktualisiert?

Question

Ich habe diesen einfachen Code-Schnipsel:

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); 
    }; 
}]); 

Snippet auch in jsfiddle.

Wenn ich in die Update-Taste klicke, wird nur der Wert val1 im HTML aktualisiert. Wie behebt man das? Aber am wichtigsten, warum passiert das?

PS: setTimeout ist nur eine Vereinfachung des Problems. Tatsächlich handelt es sich um benutzerdefinierte Komponenten mit Rückruffunktionen.

Answer 1

setTimeout löst keinen Digest-Zyklus aus, daher wird die Ansicht nicht aktualisiert. Angular kommt mit einem eingebauten $timeout Modul - verwenden Sie das und ein Digest-Zyklus wird ausgeführt und Ihre Ansicht wird aktualisiert.

zu benutzen:

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