Perché questo semplice nG-show di AngularJS non funziona?

Question

Non riesco a capire perché la mia semplice app AngularJS non funzioni come previsto. "Caricamento in corso ..." dovrebbe essere nascosto e "Fatto!" dovrebbe essere mostrato dopo 1 secondo.

html:

<div ng-app> 
    <div ng-controller="TestCtrl"> 
     <div class="text-center" ng-show="loading"> 
      <h1>Loading...</h1> 

    </div> 
     <div class="text-center" ng-show="!loading"> 
      <h1>Done!</h1> 

     </div> 
    </div> 
</div> 

Javascript:

function TestCtrl($scope) { 
    $scope.loading = true; 
    setTimeout(function() { 
     $scope.loading = false; 
    }, 1000); 
} 

Answer 1

Devi dire angolare che è stata aggiornata la var:

function TestCtrl($scope) { 
    $scope.loading = true; 
    setTimeout(function() { 
     $scope.$apply(function(){ 
      $scope.loading = false; 
     }); 
    }, 1000); 
} 

o semplicemente

function TestCtrl($scope, $timeout) { 
    $scope.loading = true; 
    $timeout(function() { 
     $scope.loading = false; 
    }, 1000); 
} 

Answer 2

È necessario utilizzare $timeout e iniettarlo nel controllore:

function TestCtrl($scope, $timeout) { 
    $scope.loading = true; 
    $timeout(function() { 
     $scope.loading = false; 
    }, 1000); 
} 

Fiddle demo

Edit: rimosso $scope.apply(); come @Salman suggerito

Answer 3

Si desidera utilizzare apply() funzione per arresto caricamento messaggio.

Controllare questo Demo jsFiddle **.

JavaScript:

function TestCtrl($scope) { 
    $scope.loading = true; 
    setTimeout(function() { 
     $scope.$apply(function(){ 
      $scope.loading = false; 
     }); 
    }, 1000); 
} 

Spero che questo sarebbe aiutarvi!

Answer 4

un modo migliore per farlo è chiamando $scope.$digest(); per aggiornare l'interfaccia utente

Answer 5

quando il fuoco evento angolare ad un altro oggetto, come setTimeout si dovrebbe usare

$scope.$apply(function(){ 
    $scope.loading = false; 
}); 

ad esempio

var loading={ 
    show:function(){ 
     $scope.loading=true 
    }, 
    hide:function(){ 
     $scope.loading=false 
    } 
} 

potrebbe non funzionare in modo migliore

var loading={ 
     show:function(){ 
      $scope.$apply(function(){ 
       $scope.loading=true 
      }); 
     }, 
     hide:function(){ 
      $scope.$apply(function(){ 
       $scope.loading=false 
      }); 
     } 
    } 

Answer 6

Ho trovato che un modo per aggirare il funzionamento di ng-show e non di valutare come si vuole è usare invece ng-class.

In questo modo, quando $ scope.loading non è uguale a true, la classe css "caricata" verrà aggiunta all'elemento. Quindi hai solo bisogno di usare la classe css per mostrare/nascondere il contenuto.

.mycontent { 
    display: none; 
} 

.loaded { 
    display: block; 
}