Umfang Variable in Winkel aktualisiert, aber Veränderung reflektiert wird nicht auf Benutzer

Question

Ich habe einige Winkelvariablen wie so gesetzt:

$scope.pane = []; 
$scope.pane.count = 0; 
$scope.pane.max = 5; 

Dann zeige ich die Variablen in der HTML wie folgt aus:

{{pane.count}} 

Diese funktioniert gut und zeigt 0 wie erwartet an.

Jetzt, wenn ich die Variable an einem beliebigen Punkt aktualisieren, passiert die Aktualisierung (ich kann mit console.log sehen), aber die gedruckte Version im HTML wird nicht aktualisiert.

z.

setTimeout(function(){ 
    $scope.pane.count = 1; 
},1000); 

Ich verwende Angular v1.3. Was mache ich falsch?

Answer 1

Damit angular über Änderungen informiert wird, müssen Sie angular wrapper für Timeout verwenden.

Versuchen Sie folgendes:

$timeout(function() { 
    $scope.pane.count = 1; 
}, 1000); 

Im Allgemeinen, wenn Sie eine Struktur außerhalb Winkel Welt (wie jQuery-Plugin) haben, die Werte ändert, müssen Sie $ scope rufen $ apply() Winkel wissen lassen über. Sie.

$scope.$apply(); 

Answer 2

SetTimeout außerhalb AngularJS Umfang, so dass Sie $ Umfang verwenden müssen. Anwenden $ oder $ timout siehe Beispiel-Demo unter

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

 
app.controller('homeCtrl', function($scope, $timeout) { 
 

 
    $scope.pane = []; 
 
    $scope.pane.count = 0; 
 
    $scope.pane.count2 = 0; 
 
    $scope.pane.max = 5; 
 

 
    setTimeout(function() { 
 
    $scope.$apply(function() { 
 
     $scope.pane.count = 1; 
 
    }) 
 

 
    }, 1000); 
 

 
    $timeout(function() { 
 
    $scope.pane.count2 = 5; 
 
    }, 2000); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
<h3>setTimeout</h3> 
 
    Count 1: {{pane.count}}<br/> 
 
    <h3>$timeout</h3> 
 
    Count 2: {{pane.count2}} 
 
    </div> 
 
</div>