CODEWITHSUNDEEP
angularjsangularjs-directiveng-viewng-hide
Ken Ryan
Ken Ryan

Reputation: 549

How can I hide certain contents of index.html page in an angular ng-view?

I was wondering whether I can hide certain sections on the index.html file when I access a view in angularjs.

My index.html file contains a bottom menu bar on all the views and I have created a home.html view where I don't want to include that menu bar. Is this possible with angular?

Thanks!

Upvotes: 2

Views: 5498

Answers (2)

Rodmentou
Rodmentou

Reputation: 1640

Less $rootScope

The problem with $rootScope is that you will add dependency to your code. The answer of maddygoround was a good one, but both your index.html, home.html and controllers will be hard-connected and changes will be a little harder to make.

In order to get rid of $rootScope, I would do the following changes:

<div ng-hide="hideit">This is bottom bar<div>

This is the same code that maddygoround posted and it do what it is supposed to do. Now, instead of reaching the home.html controller and changing the hideit, you will add a listener to the change of the route.

The code below can be added in the same file as your declaration of angular.module();

app.run(function($rootScope, $location){
  $rootScope.$on('$routeChangeStart', function(event, next, current){
    if ($location.path() == '/home') {
      $rootScope.hideit = true;
    };
  });
});

This will make your index.html independent of something that happened in the home.html controller. It's a lot more code, but could save your life in the future. I'm trying to get rid of the $rootScope and, if I can, I will update my answer without $rootScope.

Upvotes: 5

maddygoround
maddygoround

Reputation: 2290

Yes you can do this

for example you have your bottom bar as 

<div>This is bottom bar<div>

Now change that to 

 <div ng-hide="hideit">This is bottom bar<div>

now in the controller of home.html just write $rootScope.hideit = true;

Any where in application you want to keep bottom bar visible just do $rootScope.hideit = false;

Upvotes: 3

Related Questions