javascript - ngshow - ng-show not working

¿Por qué este simple AngularJS ng-show no funciona?

Question

No puedo entender por qué mi aplicación AngularJS simple no funciona como se esperaba. "Cargando ..." se supone que está oculto, y "¡Hecho!" debe mostrarse después de 1 segundo.

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

Creo que el mayor problema aquí es que está utilizando un modelo primitivo. El equipo angular recomienda usar un objeto para atar su modelo a. Por ejemplo:

scope.model = {};
scope.model.loading = false;

Luego en tu html:

<div class="text-center" ng-show="model.loading">

De esa manera, angular obtiene una referencia a un campo dentro de un objeto en lugar de que una variable apunte a una primitiva.

Answer 2

Cuando dispare un evento angular a otro objeto como setTimeout, debe usar

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

por ejemplo

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

puede que no funcione de la mejor manera

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

Answer 3

Desea utilizar la función apply() para detener la carga del mensaje.

Revisa este Demo jsFiddle **.

JavaScript:

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

Espero que esto te ayude!

Answer 4

He encontrado que una forma de evitar que ng-show no se evalúe de la forma que usted quiere es usar ng-class en su lugar.

 <div class="mycontent" data-ng-class="{''loaded'': !loading}"> 

De esta manera, cuando $ scope.loading no es igual a verdadero, la clase css ''cargada'' se agregará al elemento. Entonces solo necesitas una para usar la clase css para mostrar / ocultar el contenido.

.mycontent {
display: none;
}
.loaded {
display: block;
}

Answer 5

Necesita usar $timeout e inyectarlo en su controlador:

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

Demostración de violín

Edición: eliminado $scope.apply(); como sugirió @Salman

Answer 6

Necesitas decirle a angular que has actualizado la var:

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

o solo

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

Answer 7

Una mejor manera de hacerlo es llamando a $scope.$digest(); para actualizar su interfaz de usuario