Warum funktioniert diese einfache AngularJS ng-show nicht?

Question

Ich kann nicht herausfinden, warum meine einfache AngularJS App nicht wie vorgesehen funktioniert. "Loading ..." soll versteckt sein und "Done!" sollte nach 1 Sekunde angezeigt werden.

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

Sie müssen Winkel sagen, dass Sie die var aktualisiert:

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

oder nur

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

Answer 2

Sie müssen $timeout benutzen und es in Ihrem Controller zu injizieren:

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

Fiddle demo

Edit: entfernt $scope.apply(); als @Salman

vorgeschlagen

Answer 3

Sie apply() Funktion Stopp verwenden möchten Laden Nachricht.

Überprüfen Sie diese Demo jsFiddle **.

JavaScript:

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

Hope this Sie helfen würde!

Answer 4

Ein schöner Weg, dies zu tun, ist durch $scope.$digest(); Aufruf UI

Answer 5

wenn Feuer Winkel Ereignis auf ein anderes Objekt wie SetTimeout bearbeiten Sie

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

zum Beispiel

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

verwenden sollten funktioniert möglicherweise nicht am besten

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

Answer 6

Ich habe festgestellt, dass eine Möglichkeit, um ng-show zu umgehen und nicht so zu evaluieren, wie Sie es wollen, die Verwendung von ng-class ist.

Auf diese Weise, wenn $ scope.loading nicht gleich wahr ist, wird die CSS-Klasse 'loaded' zum Element hinzugefügt. Dann brauchen Sie nur eine, um die CSS-Klasse zu verwenden, um den Inhalt ein-/auszublenden.

.mycontent { 
    display: none; 
} 

.loaded { 
    display: block; 
}