Navigational bar content built depending on login state

Question

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.

Answer 1

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.