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

【问题标题】：Hide sidebar for particular page in Mobile Angular Ui.(Angular Js)在Mobile Angular Ui中隐藏特定页面的侧边栏。（Angular Js）
【发布时间】：2016-05-16 11:54:24
【问题描述】：

我正在使用移动 Angular 用户界面。我想隐藏特定页面的一面。

http://mobileangularui.com/

默认情况下，此侧边栏放置在每个页面中。但我不希望主页中有这个侧边栏。移动 Angular ui 有一个 index.html 文件。索引文件中的一个 sidebar.html 导入。并且每个页面都导入索引文件。但是当 home.html 文件出现时，侧边栏应该被隐藏。索引.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>

索引文件截图

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});
});

我只想在 home.html 页面上隐藏侧边栏。

【问题讨论】：

标签： javascript jquery angularjs mobile-angular-ui

【解决方案1】：

尝试将您的 <div ng-include="'sidebar.html'"> 元素包装在检查位置路径的 ngIf 指令中。

您可以将$location 服务注入您的MainController 并将$location.path() 的值暴露给模板。

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

然后使用：

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

另外，use the controllerAs 语法而不是 $scope。

【讨论】：

你能告诉我更多关于 $scope.currentPath = $location.path() 的信息吗？我应该在控制器中做什么
如果您将变量附加到 $scope，我假设您是因为您没有使用 ng-controller="MainController as vm" 语法，那么您应该按照我在示例中的建议进行操作在 MainController 的某处添加 $scope.currentPath = $location.path()。一定要注入 $location 服务。