Search code examples
angularjsangular-ng-ifng-hide

ng-hide not triggering, maybe something to do with ng-view?


i've got this angular website which works using angular routing. It has a login and on that page i want to hide the header. I've found on other stackoverflow pages that the best way to do this is to use ng-if or ng-hide. however these don't seem to be triggering. There is some dutch in there so just ignore that

<nav ng-hide="isLogin()" class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header"><a href="/" class="navbar-brand"><img alt="Brand" src="../resources/calendar.png"></a></div>
    <ul class="nav navbar-nav">
      <li><a href="./taken">Taken</a></li>
      <li><a href="./hulpaanvragers">Hulp aanvragers</a></li>
      <li><a href="./vrijwilligers">Vrijwilligers</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="./login" ng-click="logout()">logout</a></li>
    </ul>
  </div>
</nav>

$scope.isLogin = function(){
    console.log($location.path() == '/login');
    return $location.path() == '/login';
};

webpage note how nothing is printed in the console(random text is something else) even tough in their is a console.log() in the isLogin() function

the isLogin() function is located in the logincontroller which is referenced in the app.config() function for the route "/login"


Solution

  • i found the reason why ng-hide wasn't working it was because the navbar wasn't part of ng-view which contained the controller

    i was unaware of the fact that the navbar was located outside of the scope of ng-view

    i fixed it by adding an extra controller that envelops the entire body

    edit*

    changed the solution didn't add an extra controller but added the variable to rootscope and rootscope has access to the entire page