10

I'm trying to figure out how to show or hide an element in my navbar based on the route, or the current view being displayed. For example, I have an basic/advanced toggle button that I put in the navbar (Bootstrap 3) when the user is on the search form. But when they are anywhere else in the app that toggle button should be hidden.

In terms of the DOM, it's just a list item that builds out the nav. I'm not sure if I should show or hide based on a global value that gets set on each view, or if I can just use the route or view name. If so how that would work?

Thanks!

Improve this question

3 Answers 3

Reset to default
13

One solution is to build a function in the controller that is responsible for the navbar that could be queried to determine if the element should be displayed:

$scope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

(The above code uses Angular's $location service)

Then within the template, you can show/hide based on the result of the call (passing in the route that should toggle displaying the element):

ng-show="isActive('/search-form')"
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks, that would work for sure, which is why I marked it as answer. After submitting the question I realized I probably should not be putting search form functionality in the navbar, so I moved the toggle button to the top of the search form itself. Now I call a function in the search controller that toggles the 'advancedSearch' value and I set the ng-show for those elements using the advancedSearch property. Pretty much the same thing, but I'm not setting properties across controllers, which for now is a simpler solution for me.
This worked for me, but I found that this function is getting called 7 or 8 times for each navigation change. Do you know why this would be the case?
Anyway to get same effect however when the element is outside a controller?
10

Here's the approach I took with ui-router:

I only want to hide the navbar for a small number of pages so I went with an opt out property on the state(s) that I want to hide the navbar.

.state('photos.show', {
  url: '/{photoId}',
  views: {
    "@" : {
      templateUrl: 'app/photos/show/index.html',
      controller: 'PhotoController'
    }
  },
  hideNavbar: true
})

Inject $state in your navbar's controller and expose it to the template:

$scope.state = $state;

Then add ng-hide to your navbar template:

<nav ng-hide="state.$current.hideNavbar" ...
Improve this answer

1 Comment

super elegant solution
0

Above works perfectly using ui-router don't forget to pass $scope and $state within your function

Example:

    app.controller('LoginCtrl', function($scope, $state){
        $scope.state = $state;
        console.log($state); // this will return the current state object just in case you need to see whats going on for newbies like me :)
    });

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.