1

I am using mobile angular ui. I want to hide side for particular page.

http://mobileangularui.com/

This side bar by default put in every page. But i don't want this side bar in home page. Mobile angular ui have one index.html file. One sidebar.html import in index file. And every page import in index file. But when come home.html file will come then sidebar should be hide. Index.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>y</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="stylesheet" href="css/app.min.css" />
    <link rel="stylesheet" href="css/responsive.min.css" />

    <!-- inject:js -->
    <script src="js/app.min.js"></script>
  </head>
  <style>
  .color-winni-text
  {
    color:#c62222;
  }
  </style>
  <body ng-app="Y" ng-controller="MainController">

    <!-- Sidebars -->
    <div ng-include="'sidebar.html'"
            ui-track-as-search-param='true'
            class="sidebar sidebar-left">
    </div>

    <div class="app">

      <!-- Navbars -->

      <div class="navbar navbar-app navbar-absolute-top">
        <div class="navbar-brand navbar-brand-center " ui-yield-to="title">
          <a class="color-winni-text" href="#/"> <strong>Winni Celebration</strong></a> 
        </div>

        <div class="btn-group pull-left">
          <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
            <i class="fa fa-bars  color-winni-text fa-2x"></i> 
          </div>
        </div>

        <div class="btn-group pull-right" ui-yield-to="navbarAction">
          <div ui-toggle="uiSidebarRight" class="btn">
            <i class="fa fa-sign-in color-winni-text"></i> 
          </div>
        </div>
      </div>

      <div class="navbar navbar-app navbar-absolute-bottom">
        <div class="btn-group justified">
          <a style="color:#c62222" href="#/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
          <a style="color:#c62222" href="#/my-winni" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> My Winni</a>
          <a style="color:#c62222" href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
        </div>
      </div>

      <!-- App Body -->
      <div class="app-body background-color-body" style="background-color:white"  ui-prevent-touchmove-defaults>
        <div class="app-content scrollable-content">
          <ng-view></ng-view>  
        </div>
      </div>

    </div><!-- ~ .app -->

    <div ui-yield-to="modals"></div>
  </body>
</html>

Screen Shot of index file
enter image description here

App.js File.

angular.module('Y', [
  'ngRoute',
  'mobile-angular-ui',
  'Y.controllers.Main'
])

.config(function($routeProvider) {
  $routeProvider.when('/', {templateUrl:'home.html',  reloadOnSearch: null})
                .when('/cityPage', {templateUrl:'cityPage.html', reloadOnSearch: false})
                .when('/category-prduct', {templateUrl:'category-prduct.html',  reloadOnSearch: false})
                .when('/product-description', {templateUrl:'product-description.html',  reloadOnSearch: false})
                .when('/my-winni', {templateUrl:'my-winni.html',  reloadOnSearch: false})
                .when('/gift-box', {templateUrl:'gift-box.html',  reloadOnSearch: false});
});

I want to hide sidebar only on home.html page.

Varun Sharma
  • 4,632
  • 13
  • 49
  • 103

1 Answers1

1

Try wrapping your <div ng-include="'sidebar.html'"> element in an ngIf directive that examines the location path.

You can inject the $location service into your MainController and expose the value of $location.path() to the template.

Example: $scope.currentPath = $location.path()

Then use:

<div ng-if="currentPath !== ''">
  <div ng-include="'sidebar.html'">`

Also, use the controllerAs syntax instead of $scope.

Shaun Scovil
  • 3,905
  • 5
  • 39
  • 58
  • can you explain me more about $scope.currentPath = $location.path(). What should i do in controller – Varun Sharma Feb 06 '16 at 14:59
  • If you are attaching variables to $scope, which I assume you are since you are not using ng-controller="MainController as vm" syntax, then you should just do what I suggested in my example and add $scope.currentPath = $location.path() somewhere in your MainController. Be sure to inject the $location service also. – Shaun Scovil Feb 06 '16 at 15:03