javascript - Hide sidebar for particular page in Mobile Angular Ui.(Angular Js) -
i using mobile angular ui. want hide side particular page.
this side bar default put in every page. don't want side bar in home page. mobile angular ui have 1 index.html file. 1 sidebar.html import in index file. , every page import in index file. when come home.html file come sidebar should hide. 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> 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> screen shot of index file
app.js file.
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}); }); i want hide sidebar on home.html page.
try wrapping <div ng-include="'sidebar.html'"> element in ngif directive examines location path.
you can inject $location service maincontroller , expose value of $location.path() template.
example: $scope.currentpath = $location.path()
then use:
<div ng-if="currentpath !== ''"> <div ng-include="'sidebar.html'">` also, use controlleras syntax instead of $scope.
Comments
Post a Comment