2
\$\begingroup\$

I created a login service which holds a boolean based on if a user is logged in or not.

 angular.module('deafApp')

    .service('LoginService', function(){

        var $this = this;

        $this.loggedIn = false;


    });

Inside my login controller (LoginCtrl), I attach the LoginService to a local scope object and on the successful login callback function I turn the loggedIn value to true like so.

angular.module('deafApp')

.controller('LoginCtrl', ['Auth', '$scope', 'LoginService', function(Auth, $scope, LoginService) {

    $scope.Login = LoginService;

    $scope.loginUser = function() {

        Auth.$authWithPassword({
            email: $scope.email,
            password: $scope.password
        }).then(function(authData) {
            console.log("Logged in as:", authData.uid);
            /*
             WHERE I CHANGE THE VALUE TO TRUE
            */
            $scope.Login.loggedIn = true;
        }).catch(function(error) {
            console.error("Authentication failed:", error);
        });
    }

}]);

I wanted to change the navigation appearance based on a user logging in, so inside my navigation controller I've attached the LoginService to a local scope object again and created a function to return true or false like so.

angular.module('deafApp')

.controller('NavCtrl', [ 'LoginService',function(LoginService){
    var $this = this;

$this.Login = LoginService;

$this.isShowing = false;

$this.showToggle = function() {
    $this.isShowing = !$this.isShowing;
};

$this.goHome = function() {
    $this.isShowing = false;
};

 /*
    THIS FUNCTION RETURNS VALUE OF LOGGED IN 
 */
    $this.userLoggedIn = function() {
        return $this.Login.loggedIn;
    }


$this.navLinks = [
    {name: 'About-us', ref:'about', title: 'About DeafandHoh Page'},
    {name: 'Facts', ref: 'facts', title: 'Facts & Deaf Empowerment Page'},
    {name: 'News', ref: 'news', title: 'News Page'},
    {name: 'Products', ref: 'products', title: 'Products Page'},
    {name: 'Directory', ref: 'directory', title: 'Directory Listings Page'},
    {name: 'Resources', ref: 'resources', title: 'Resources Page'},
    {name: 'Login / Register', ref: 'login', title: 'Login & Register Page', hide: 'nav.userLoggedIn()'},
    {name: 'Profile', ref: 'profile', title: 'User Profile Page', show: 'nav.userLoggedIn()'},
    {name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!', show: 'nav.userLoggedIn()'},
    {name: 'Logout', ref: 'logout', title: 'Logout', show: 'nav.userLoggedIn()'}
];

}]);

I then attached it a hide and show property to several of the navLinks which get repeated that I want to either hide when truthy and show when truthy.

{name: 'Login / Register', ref: 'login', title: 'Login & Register Page', hide: 'nav.userLoggedIn()'},
{name: 'Profile', ref: 'profile', title: 'User Profile Page', show: 'nav.userLoggedIn()'},
{name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!', show: 'nav.userLoggedIn()'},
{name: 'Logout', ref: 'login', title: 'Login & Register Page', show: 'nav.userLoggedIn()'}

The HTML looks like this:

<li ng-repeat="nav in nav.navLinks">
    <a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name" ng-hide="nav.hide" ng-show="nav.show"></a>
  </li>

Essentially, the purpose is for a login/register nav link to disappear when a user logs in and some more unique features in the navigation to appear for logged in users.

\$\endgroup\$
1
\$\begingroup\$

I discovered that inside of ng-repeat directive expressions aren't evaluated which is why the function wasn't affecting the navigation state. to make the navigation state change I created another array of objects inside my navigation controller like this:

  $this.loggedInLinks = [
    {name: 'About-us', ref:'about', title: 'About DeafandHoh Page'},
    {name: 'Facts', ref: 'facts', title: 'Facts & Deaf Empowerment Page'},
    {name: 'News', ref: 'news', title: 'News Page'},
    {name: 'Products', ref: 'products', title: 'Products Page'},
    {name: 'Directory', ref: 'directory', title: 'Directory Listings Page'},
    {name: 'Resources', ref: 'resources', title: 'Resources Page'},
    {name: 'Profile', ref: 'profile', title: 'User Profile Page'},
    {name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!'},
    {name: 'Logout', ref: 'logout', title: 'Login & Register Page'}
];

and to allow the state to change when the user logged in I attached a ng-hide to the default HTML navigation bar like so

<div class="hidden-xs" ng-hide="nav.userLoggedIn()">
    <ul class="nav navbar-nav">
        <li ng-repeat="nav in nav.defaultLinks">
            <a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name"></a>
        </li>
    </ul>
</div>

And Replicated that in another HTML section but instead with ng-show for when the LoginService.loggedIn state changed to truthy

 <div class="hidden-xs" ng-show="nav.userLoggedIn()">
      <ul class="nav navbar-nav">
          <li ng-repeat="nav in nav.loggedInLinks">
              <a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name"></a>
         </li>
     </ul>
</div>

Now when a user logs in the navigation bar changes appropriately.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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