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'">`

此外，use the controllerAs语法代替$scope。

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

1 个答案: