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