Reloading Angular navigation directive after login

I'm just learning angularjs and working on my first "real" project. I've spent a couple hours searching online for an answer, but can't seem to find anything relevant in simple enough terms for me to understand.

I have a directive that just loads a navigation header:

app.directive('navDirective', function() {
    return {
              templateUrl: '../../views/nav.html'

And in my index.html file I have simply

<nav-directive> </nav-directive>

Initially I was working with Auth0 and got that working, and then added an ng-show to the nav items so that only login shows when there's no user, and all the others appear when there is a user.

Now, I am trying to get local authentication working, instead of using Auth0. It works, but I have to hit the brower's reload button after logging in before I see the navigation template update.

I think I've figured out that when using Auth0, I actually leave my website to go to Auth0, and then the callback causes my page to reload - so I see my nav items.

When I login locally using passport's local strategy, how can I force the navigation template to reload? Or become aware there is now a user, so change the ng-show's on the list items in the template?

Reading tonight, it seems like I can use $watch to do this, but I can't find a "$watch-for-dummies" page and am confused as to how that works exactly, what I would put in the link function and how I would trigger it.

My nav.html template is

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" ng-controller="NavCtrl">
        <a class="navbar-brand" href="#" ng-show="currentUser">User: {{ currentUser.username }}</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>

        <div class="collapse navbar-collapse navbarCollapse justify-content-end" id="navbarNavDropdown">
          <ul class="nav navbar-nav ">  

            <li class="nav-item" ng-show="currentUser">
              <a class="nav-link nav-item-colapse" ui-sref="home">Home </a>

            <li class="nav-item" ng-show="currentUser">
              <a class="nav-link nav-item-colapse" ui-sref="view2">View 2</a>

            <li class="nav-item" ng-show="currentUser">
              <a class="nav-link nav-item-colapse" ui-sref="view3">View 3</a>

            <li class="nav-item" ng-show="currentUser">
                <a class="nav-link nav-item-colapse" ui-sref="reports">Reports</a>

            <li class="nav-item dropdown" ng-show="currentUser">
              <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <div class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item nav-item-colapse" ui-sref="sub1">Sub Task1</a>
                <a class="dropdown-item nav-item-colapse" ui-sref="sub2">Sub Task2</a>
                <a class="dropdown-item nav-item-colapse" href="">Do Something Else</a>

            <li class="nav-item">
              <a class="nav-link active" ui-sref="login" ng-show="!currentUser">Login</a>

            <li class="nav-item">
                <a class="nav-link" ng-click="logout()" ng-show="currentUser">Logout</a>


and navCtrl is:

app.controller("navCtrl", function($scope, mainSrvc) {

      $scope.user = (;
      console.log('nav ctrl ran')  //except it doesn't when logging in locally

And this point I'm not sure if I'm going about this completely wrong or what.

Any suggestions or pointers?

0 Comment



Captcha image