为什么这个简单的AngularJS ng-show不起作用？

Question

我无法弄清楚为什么我的简单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);
}

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

Answer 2

更好的方法是调用$scope.$digest();更新UI

Answer 3

您需要$timeout在控制器中使用并注入它:

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

小提琴演示

编辑:删除 $scope.apply();@Salman建议

Answer 4

您想使用apply()函数来停止加载消息.

检查这个演示jsFiddle**.

JavaScript的:

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

希望这会对你有所帮助!