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

Question

我正在使用移动角度ui。 我想隐藏特定页面的一面。

http://mobileangularui.com/

默认情况下，此侧边栏显示在每个页面中。 但是我不希望在主页上出现该侧栏。 移动角度ui具有一个index.html文件。 一个sidebar.html导入索引文件。 并将每个页面导入索引文件。 但是当home.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>

索引文件的屏幕截图

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页面上隐藏侧边栏。

Answer 1

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

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

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

然后使用：

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

另外，请使用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