Angular JS/UI-Router: disable directives for a given state?

3
votes

I have an Angular 1.3 app using UI router. I have a view for the pages and a directive for the header and another for the footer.

<body ng-controller="AppCtrl as app">

<!-- header -->
<div header></div>

<!-- content -->
<div ui-view=""></div>

<!-- FOOTER -->
<div footer></div>

There are some states in my app where I do not want to display the header and/or footer. How is that done?

4
javascriptangularjsangularjs-directiveangular-ui-router
use ng-hide or ng-show and set visibility from controllers – valverde93

4 Answers

1
votes

Implement a method in your controller that decides whether the header should be visible for a given state, e.g.

.controller('AppCtrl', function() {
    this.isHeaderVisible = function() {
        return ...// your logic here
    }
});

And then use ng-if (or ng-show as per the comment):

<div header ng-if="app.isHeaderVisible()"></div>

Same goes for footer.

1
votes

Don't use ng-hide or controllers. Ui-router has a built in functionallity to do so. Use nested states and nested views to show/hide according to the state you are at the moment. Take a look at these links:

Set up a plunker and I help you get it working.

0
votes

If you're using individual controllers for your states, you can set boolean scope variables in each and then use those and ng-show to control what's being shown.

0
votes

Use angular ui-router please!!!

It is a very nice style to organize your views:

Documentation: https://github.com/angular-ui/ui-router

Examples: http://angular-ui.github.io/ui-router/sample/#/

Controllers + ng-hide are not well to handle nested views because the DOM be too loaded. Thus, ui-route was developed to do it. Although ng-hide can be used do it, ui-route is even better.