Почему этот простой AngularJS ng-show не работает?

Я не могу понять, почему мое простое приложение AngularJS работает не так, как предполагалось. "Загрузка..." предполагается скрыть, и "Готово!" следует показывать через 1 секунду.

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);
}

Ответы

Ответ 1

Вам нужно сообщить angular, что вы обновили var:

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

или просто

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

Ответ 2

Лучше всего это сделать, позвонив $scope.$digest();, чтобы обновить интерфейс пользователя

Ответ 3

Вам нужно использовать $timeout и ввести его в контроллер:

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

Скриншот демо

Изменить: удален $scope.apply();, как предложил @Salman

Ответ 4

Вы хотите использовать apply(), чтобы остановить загрузку сообщения.

Отметьте Demo jsFiddle **.

JavaScript:

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

Надеюсь, это поможет вам!

Ответ 5

при событии fire angular для другого объекта, такого как setTimeout, вы должны использовать

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

например

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

может не работать наилучшим образом

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

Ответ 6

Я обнаружил, что один способ обойти ng-show не оценивается так, как вы хотите, - вместо этого использовать ng-класс.

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

Таким образом, когда $scope.loading не равен true, класс css 'loaded' будет добавлен к элементу. Тогда вам просто нужно использовать класс css для отображения/скрытия содержимого.

.mycontent {
    display: none;
}

.loaded {
    display: block;
}