2017-02-10 15 views
1

Я не эксперт с angularjs и firebase, но я сделал этот короткий код, и я не могу решить, почему он не работает.AngularJS + Firebase ng-show не работает

Мне нужно протестировать, если пользователь вошел в систему (с аутентификацией firebase), и если пользователь вошел в систему, я хочу показать элемент «div». Если пользователь не войдет в «div», то будет скрыт.

Мой HTML-код выглядит следующим образом:

<body ng-app="myApp" ng-controller="myCtrl"> 
    <div class="memberonly" ng-show="loggedIn"> 
     <h1>This is visible only for logged in user.</h1> 
    </div> 
<body> 

И сценарий здесь:

<script> 
var app = angular.module('myApp', ['ngRoute']); 

app.controller('myCtrl', function($scope) { 
    firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 
    // User is signed in. 
    console.log('user logged in.'); 
    $scope.email = user.email; 
    console.log($scope.email); 
    $scope.loggedIn = true; 
    console.log('$scope.loggedIn: ', $scope.loggedIn); 
    } else { 
    // No user is signed in. 
    console.log('no user logged in.'); 
    $scope.loggedIn = false; 
    console.log('$scope.loggedIn: ', $scope.loggedIn); 
    } 
}); 
}); 
</script> 

В консоли можно увидеть правильные значения, но все еще нг-шоу не работает. Я вижу, если пользователь вошел в систему, я вижу его адрес электронной почты, loggedIn установлен в 'true'. Может ли кто-нибудь помочь?

Большое спасибо за любую помощь.

+0

У вас есть '$ scope' переменная с именем' loggedIn' где-то в вашем приложении? попробуйте изменить имя переменной 'loggedIn', чтобы увидеть, работает ли она. – Merlin

+0

Нет, это только место, где оно есть. –

ответ

0

Использовать $scope.$apply() после предоставления значения $scope.loggedIn, он должен работать.

+0

Да, вы совершенно правы! Теперь он работает отлично! –

+0

Спасибо Mohammad :-) –

0

Попробуйте следующее:

if (user) { 
    // User is signed in. 
    console.log('user logged in.'); 
    $scope.email = user.email; 
    console.log($scope.email); 
    $scope.$apply(function() { 
     $scope.loggedIn = true; 
    }) 
    console.log('$scope.loggedIn: ', $scope.loggedIn); 
    } else { 
    // No user is signed in. 
    console.log('no user logged in.'); 
    $scope.$apply(function() { 
     $scope.loggedIn = false; 
    }) 
    console.log('$scope.loggedIn: ', $scope.loggedIn); 
    } 
+0

Да, это, вероятно, сработает, проблема решена :-) Спасибо. –