![](/img/trans.png)
[英]Not retrieve image from JSON in Mobile Angular Ui.(Angular Js)
[英]Hide sidebar for particular page in Mobile Angular Ui.(Angular Js)
我正在使用移動角度ui。 我想隱藏特定頁面的一面。
默認情況下,此側邊欄顯示在每個頁面中。 但是我不希望在主頁上出現該側欄。 移動角度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頁面上隱藏側邊欄。
嘗試將您的<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
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.