Hiding certain HTML elements when using ng-view (Angularjs)

Question

I'm working on one of my first projects in AngularJS, and I'm using ng-view with $routeProvider for my templating, but I've run into a small problem. On a few of my pages (landing, login, and registration) I don't want the navbar to show; but I want the navbar to show on all my other views. What are my options in fixing this problem using AngularJS?

The link below includes the index.html, login.html, and my $routeProvider

index.html

<body ng-app="hello">

    <!-- FIXED NAVBAR -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">hello</a>
        </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Add Group</a></li>
              <li><a href="#">Upload File</a></li>
              <li class="active"><a href="#">Notifications</a></li>
            </ul>
          </div>
      </div>
    </div>

    <div class="container">
      <div ng-view></div>
    </div>
</body>

login.html

<div class="container">
<form ng-controller="AdminUserCtrl" class="form-signin" role="form" method="post">
    <h2 class="form-signin-heading">Please sign in</h2>
    <input type="email" class="form-control" id="inputUsername" placeholder="Email address" ng-model="login.email" required autofocus>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="login.password" required>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="remember-me"> Remember Me
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="logIn(login.email, login.password)">Sign In</button>
    <p style="text-align: center; margin-top: 5px;"><a style="text-align: center;" href="#/register">Register A New Account</a></p>
</form>

$routeprovider

hello.config([ '$locationProvider', '$routeProvider', 
function($location, $routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/login.html',
            controller: 'AdminUserCtrl',
            access: { requiredLogin: false}
        }).
       when('/feed', {
            templateUrl: 'views/feed.html',
            controller: 'FeedListCtrl',
            access: { requiredLogin: true}

        otherwise({
            redirectTo: '/'
        });
 }]);

The hack I'm currently thinking of to fix this is taking out the html code for the navbar out of the index and only adding it in the pages I need it, but i was wondering if there is another fix?

Your code has to go in the question, not on an external code-hosting service like "plnkr". — user229044
– user229044 ♦, Commented Aug 15, 2014 at 3:37
how is this question off topic? i just thought theres too much code to put it in the actual question. — Saleh
– Saleh, Commented Aug 16, 2014 at 19:19
You thought wrong. Your code has to go in the question for the question to be on-topic here. If you have too much code to go in the question, your question is, by definition, off-topic. — user229044
– user229044 ♦, Commented Aug 16, 2014 at 19:33

Explosion Pills · Accepted Answer · 2014-08-15 01:51:43Z

4

The navigation bar and other components that are separate from ng-view should have their own controllers. You can communicate information to these controllers from controllers within the view using a service. Properties of this service can be bound to the navigation views and their display can be updated based on the values of the properties. For example.

app.factory("navBarService", function () {
    return {show: true};
});

app.controller("NavBarController", function (navBarService) {
    this.show = navBarService.show;
});

app.controller("SomeControllerYouRouteToController", function (navBarService) {
    navBarService.show = false;
});

answered Aug 15, 2014 at 1:51

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saleh Over a year ago

on the main <div> that controls the navbar would i add ng-controller="NavbarController"?

Collectives™ on Stack Overflow

Hiding certain HTML elements when using ng-view (Angularjs)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related