AngularJS и Firebase Auth ngShow и задержка ngClick?

Я только начинаю работать с AngularJS, и у меня возникла странная проблема с аутентификацией Firebase. У меня очень простое тело, которое показывает текущий статус пользователя (вошел в систему, истина или ложь), а также параметры входа и выхода.

Когда я нажимаю кнопку «Войти» в первый раз, ничего не происходит. Когда я щелкаю по нему второй раз, состояние входа в систему меняется, и переключатели divs ng-show и ng-hide.

Та же проблема при нажатии кнопки выхода.

Почему это происходит только после второго клика?

index.html:

<div class="container" ng-controller="userCtrl">    

    <h1>User logged in: {{loggedIn}}</h1>

    <div ng-hide="loggedIn">
        <div class="form-group">
            <label for="email">Email:</label> 
            <input type="email" class="form-control" name="email" ng-model="user.email" />
        </div>
        <div class="form-group">
            <label for="password">Password:</label> 
            <input type="password" class="form-control" name="password" ng-model="user.password" />
        </div>
        <button type="button" class="btn btn-lg btn-success" ng-click="signIn()">Sign in</button>
    </div>
    <div ng-show="loggedIn"><button type="button" class="btn btn-lg btn-danger" ng-click="signOut()">Sign out</button></div>
</div>

Контроллер:

var myApp = angular.module("tijdlozespelApp", ["firebase"]);

    myApp.controller("userCtrl", function ($scope, $firebaseObject) {   

    $scope.loggedIn = false;

    $scope.signIn = function() {
            var email = $scope.user.email;
            var password = $scope.user.password;
            firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {
            $scope.loggedIn = true;
        }).catch(function(error) {
            $scope.loggedIn = false;
        });
    }

    $scope.signOut = function() {
        firebase.auth().signOut().then(function() {
            $scope.loggedIn = false;
        });
    }   

});

person T0mba    schedule 20.10.2016    source источник


Ответы (1)


Используйте $ scope. $ Apply (function () {...}) для обновления данных области, когда вы используете асинхронные обработчики. У Angular есть проблемы с определением изменений области для асинхронных операций.

$scope.$apply(function() {
   $scope.loggedIn = true;
});
person VadimB    schedule 20.10.2016