Question

我有一个简单的进度条如下：

<div class="progress" ng-show="logging" id="login-progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
       Logging In...
    </div>
</div>

你会注意到我在第一个div上有一个ng-show="logging"。我想基于真/假变量进行显示/隐藏。

$scope.logging = false;

    authen.pass = function() {

        $scope.logging = true;

        $timeout(function(){

            ref.authWithPassword({
                email    : authen.email,
                password : authen.password
            }, function(error, authData) {
                if (error) {
                    $scope.logging = false; // This isn't working
                    swal({
                        title: "Whoops!",   
                        text: error,
                        timer: 4000,   
                        showConfirmButton: false
                    });
                } else {
                    $window.location.href = '#/dashboard';
                }
            });

        }, 2000);
    }

上面是我的控制器代码，默认情况下将日志记录变量设置为false。一旦调用该函数，它就变为真。如果有错误，则应将其设置为false。这似乎没有发生。

我在网上发现的一切都说明了你是怎么做到的。这段代码有什么问题？

我已经尝试将其从$ timeout函数中删除，但仍然无法正常工作。

Answer 1

authWithPassword的回调很可能是在角度摘要周期之外执行的。它应该像这样工作：

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

也许这篇文章有助于理解它：Understanding Angular’s $apply() and $digest()

根据真/假变量显示/隐藏进度条

1 个答案: