Show/Hide elements on website for certain pages

Question

I am using AngularUI Router to navigate content on my website. I have some webpages that show the header/footer navigation and some that do not. I want to be able to detect what my current page is and insert the HTML for the header/footer if needed.

Here is my current router

angular.module('app', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
  function($urlRouterProvider, $stateProvider) {

    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'partials/home.html',
        controller: 'homeCtrl'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'partials/about.html',
        controller: 'aboutCtrl'
      })
      .state('contact', {
        url: '/contact',
        templateUrl: 'partials/contact.html',
        controller: 'contactCtrl'
      })
      .state('create', {
        url: '/create',
        templateUrl: 'partials/create.html',
        controller: 'createCtrl'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'partials/login.html',
        controller: 'loginCtrl'
      })
}]);

For the html I have this

<html ng-app="app">
  <body>

    <!-- *********** HEADER ************* -->
    <div ng-include=""></div>

    <!-- ********** CONTENT *********** -->
    <div ui-view></div>

    <!-- **************** FOOTER ****************** -->
    <div ng-include="'partials/standard_footer.html'"></div>

  </body
</html>

For the webpages create and login I do not want to show the header and footer, but I am not sure how to do that.

I want to do something like this,

<div ng-if="!login && !create" ng-include="'standard_header.html'"></div>

How can I achieve this?

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

You can expose $state on the $rootScope and that will make it accessible in your webpage. You can then simply check for state.current.name != 'login' Like below: Exposing the current state name with ui router

Edit: Working Plunker of what i meant: https://plnkr.co/edit/JDpCo3fTePobuX9Qoxjn

edited May 23 '17 at 12:07

Community

1
1

answered May 29 '16 at 02:46

Ankit Gupta

179
1
9

I am new to angular and can't seem to follow this, can you elaborate? – Gary Holiday May 29 '16 at 16:34
I have added a plukr as an e.g. – Ankit Gupta May 30 '16 at 12:14

score 0 · Answer 2 · answered May 29 '16 at 02:46

You're almost there. Just add a flag in the params of the appropriate states:

.state('create', {
  url: '/create',
  templateUrl: 'partials/create.html',
  controller: 'createCtrl',
  params: {
    hideHeaderAndFooter: true
  }
})
.state('login', {
  url: '/login',
  templateUrl: 'partials/login.html',
  controller: 'loginCtrl',
  params: {
    hideHeaderAndFooter: true
  }
})

And then inject the $stateParams service in your controllers. Every property of the params object will be exposed as a property of the object this service returns:

loginCtrl.$inject = ['$scope', '$stateParams'] 

function loginCtrl($scope, $stateParams) {
  $scope.hideHeaderAndFooter = $stateParams.hideHeaderAndFooter
}

Then you can use ng-if just the way you meant to use it:

<div ng-if="!hideHeaderAndFooter" ng-include="'standard_header.html'"></div>

Show/Hide elements on website for certain pages

2 Answers2