Question

我无法弄清楚为什么我的简单AngularJS应用程序没有按预期工作。＆＃34;加载中＆＃34;应该被隐藏，并且完成！＆＃34;完成！＆＃34;应在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();来更新您的用户界面

Answer 3

您需要使用$timeout并将其注入您的控制器：

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

Fiddle demo

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

Answer 4

您希望使用apply()功能停止加载消息。

检查Demo jsFiddle **。

JavaScript的：

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

希望这会对你有所帮助！

Answer 5

当火焰角度事件发生到像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
            });
         }
    }

Answer 6

我发现一种解决ng-show无法以你想要的方式进行评估的方法是使用ng-class。

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

这样当$ scope.loading不等于true时，css类加载了#c;将被添加到元素中。然后你只需要使用css类来显示/隐藏内容。

.mycontent {
    display: none;
}

.loaded {
    display: block;
}

Answer 7

我认为这里最大的问题是您使用原语作为模型。角度团队建议使用一个对象来绑定模型。例如：

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

然后在你的html：

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

这样，angular获取对象内部字段的引用，而不是变量指向的基元。

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

7 个答案: