隱藏移動Angular Ui中特定頁面的側邊欄（角度Js）

我正在使用移動角度UI。我想隱藏特定頁面的一面。隱藏移動Angular Ui中特定頁面的側邊欄（角度Js）

http://mobileangularui.com/

本方默認放置在每一頁吧。但我不希望這個側欄在主頁。 Mobile angular 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的頁面。

來源

2016-02-06 V SH

嘗試將<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。

來源

2016-02-06 14:51:49

你能解釋一下我關於$ scope.currentPath = $ location.path（）的更多信息。我應該怎麼做在控制器 –

如果你將變量附加到$ scope，我認爲你是因爲你沒有使用ng-controller =「MainController as vm」語法，那麼你應該做我在我的例子中建議的，並添加$ scope.currentPath = $ location.path（）在MainController中的某處。一定要注入$ location服務。 –

隱藏移動Angular Ui中特定頁面的側邊欄（角度Js）

回答

相關問題