在Mobile Angular Ui（Angular Js）中隐藏特定页面的侧边栏。

Question

I am using mobile angular ui. 我正在使用移动角度ui。 I want to hide side for particular page. 我想隐藏特定页面的一面。

http://mobileangularui.com/ 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. 移动角度ui具有一个index.html文件。 One sidebar.html import in index file. 一个sidebar.html导入索引文件。 And every page import in index file. 并将每个页面导入索引文件。 But when come home.html file will come then sidebar should be hide. 但是当home.html文件到来时，侧边栏应该被隐藏了。 Index.html 的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 索引文件的屏幕截图

App.js File. App.js文件。

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. 我只想在home.html页面上隐藏侧边栏。

Answer 1

Try wrapping your <div ng-include="'sidebar.html'"> element in an ngIf directive that examines the location path. 尝试将您的<div ng-include="'sidebar.html'">元素包装在检查位置路径的ngIf指令中。

You can inject the $location service into your MainController and expose the value of $location.path() to the template. 您可以将$ location服务注入到MainController ，并将$location.path()的值暴露给模板。

Example: $scope.currentPath = $location.path() 示例： $scope.currentPath = $location.path()

Then use: 然后使用：

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

Also, use the controllerAs syntax instead of $scope . 另外，请使用controllerAs语法而不是$scope 。

在Mobile Angular Ui（Angular Js）中隐藏特定页面的侧边栏。

问题描述

1 个解决方案

解决方案1
1 2016-02-06 14:51:49

在Mobile Angular Ui（Angular Js）中隐藏特定页面的侧边栏。

问题描述

1 个解决方案

解决方案1 1 2016-02-06 14:51:49

解决方案1
1 2016-02-06 14:51:49