variabile portata aggiornate in angolare ma modifica non si riflette all'utente

Question

Ho alcune variabili angolari impostato in questo modo:

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

Poi visualizzare le variabili del HTML simili:

{{pane.count}} 

Questo funziona bene e visualizza 0 come previsto.

Ora se aggiorno la variabile in qualsiasi momento, l'aggiornamento si verifica (posso vedere utilizzando console.log) ma la versione stampata nell'HTML non si aggiorna.

E.g.

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

Sto usando Angular v1.3. Che cosa sto facendo di sbagliato?

Answer 1

Per informazioni angolari sulle modifiche, è necessario utilizzare l'angolare wrapper per il timeout.

Prova questo:

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

In genere, quando si dispone di una struttura di fuori del mondo angolare (come jQuery plugin) che modifica i valori, devi chiamare $ portata $ apply() per far sapere angolare intorno. loro.

$scope.$apply(); 

Answer 2

setTimeout è al di fuori angularjs ambito quindi è necessario usare $ portata. $ Applicare o $ timout vedere campione demo sotto

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>