current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

guys. I'm doing a login page. When users haven't logged in, the page will show greetings and login button. When users logged in, the greeting and login button will disappear and logout button will appear.

However, my greeting div just NEVER disappears. I don't know why. I tried to use $scope.$apply() but it didn't work at all. The followings are my code. Please help, thanks.

PS: I want the greetings to disappear when people login, and also greetings will appear when people logout.

My HTML

<div ng-show="show.intro">
    <h3>Hi, how are you?</h3>
    <i>*Please log in first to access your news.</i>
  </div>
  <span>
    <br>
    <button type="button" class="btn btn-info" ng-click="login()" ng-hide="authData">Login using Google Account</button> 
  </span>
  <span class="pull-right">
    <br>
    <button type="button" class="btn btn-info" ng-click="logout()" ng-show="authData">Log Out</button> 
  </span>

My Controller

.controller("AuthController", ["$scope", "$location",
    function($scope, $location) {
        $scope.show = {intro: true};
        $scope.login = function() {
            $scope.show.intro = false;
        };
        $scope.logout = function() {
            $scope.show.intro = true;
        };

Thanks.

share|improve this question
    
where are u setting authData? – Aaron Anodide yesterday
    
authData is a return value from firebase authentication method. So if authData is null, page will show login button, if authData has value, it will show logout button. – Victor Huang yesterday
    
The code looks valid. Can give full html? And try to put {{show}} <div ng-show="show.intro"> <h3>Hi, how are you?</h3> <i>*Please log in first to access your news.</i> </div> so we can see the object if accessable from the div – Utku Apaydin yesterday

3 Answers 3

up vote 0 down vote

I just add the ng-controller and the code works ok. Please see the working plnkr:

http://plnkr.co/edit/cLyvEp?p=preview

html:

<div ng-controller="AuthController">
  <div ng-show="show.intro">
    <h3>Hi, how are you?</h3>
    <i>*Please log in first to access your news.</i>
  </div>
  <span>
    <br>
    <button type="button" class="btn btn-info" ng-click="login()" ng-hide="authData">Login using Google Account</button> 
  </span>
  <span class="pull-right">
    <br>
    <button type="button" class="btn btn-info" ng-click="logout()" ng-show="authData">Log Out</button> 
  </span>
 </div>

js:

(function(){
var app = angular.module('myApp', []);

app.controller("AuthController", ["$scope", "$location",
    function($scope, $location) {
        $scope.show = {intro: true};
        $scope.login = function() {
            $scope.show.intro = false;
            $scope.authData = true;
        };
        $scope.logout = function() {
            $scope.show.intro = true;
            $scope.authData = null;
        };
    }]
);
})();
share|improve this answer
up vote 0 down vote

1)you can also try like this it's working for me check it once..

<body ng-controller="AuthController">
    <div ng-show="show.intro">
        <h3>Hi, how are you?</h3>
        <i>*Please log in first to access your news.</i>

        <span>
            <br>
            <button type="button" class="btn btn-info" ng-click="login()" >Login using Google Account</button> 
        </span>
    </div>
    <span class="pull-right">
        <br>
        <button type="button" class="btn btn-info" ng-click="logout()" ng-show="!show.intro">Log Out</button> 
    </span>
    <script>
     angular.module('myApp', [])
             .controller("AuthController", ["$scope", "$location",function ($scope, $location) {
                        $scope.show = {intro: true};
                        $scope.login = function () {
                             $scope.show.intro = false;
                        };
                        $scope.logout = function () {
                             $scope.show.intro = true;
                        };
              }]);
    </script>
</body>
share|improve this answer
up vote 0 down vote

I think I found out the reason the show.intro is always true.

$scope.authData = null;
**$scope.show = {intro: true};**
var authDataCallback = function(authData) {
    $scope.authData = authData;
}

// monitoring authentication status
ref.onAuth(authDataCallback);

I have code above to check my authentication status. So I guess every time controller went to check status(onAuth), it will change the boolean to true(see bold line).

The following is my answer to solve this.

 $scope.authData = null;
**$scope.show = {intro: true};**
var authDataCallback = function(authData) {
    $scope.authData = authData;
    if($scope.authData === null) {
        $scope.show.intro = true;
    }
    else {
        $scope.show.intro = false;
    }
}

// monitoring authentication status
ref.onAuth(authDataCallback);

Thanks for all the answers, I really appreciate them.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.