Menu
I'm trying to utilize ng-if to include side bar in some of my singlepage app pages and hide it from other. the html is :
<body ng-app="simpleapp">
<div id="wrapper">
<!-- Navigation -->
<div ng-include="'./include/sidebar.html'"></div>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div ng-view class="slide-animation"></div>
</div>
</div>
</div>
in above example ng-include loads the sidebar, and the id page-wrapper is used to add the extra margin on container for the sidebar, and the ng-view is where my view get loaded in.
what i need to do is in somepages i dont want the sidebar to exists, like (in the login page for example)
angular.module('exampleApp', ['ngRoute', 'ngResource', 'ngCookies'])
//Routes
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'partials/login.html',
controller: 'loginCtrl'
}).
when('/home', {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}).
otherwise({
redirectTo: '/login'
});
} ])
.controller('mainCtrl',function($rootScope,$window){
$rootScope.show = true;
if($window.location.hash == '#/login'){
$rootScope.show = false;
} });
my best solution that i cameup with was to add another ctrl to the page body and use ng-if and condition to add id to div.
<div ng-if="$root.show" ng-include="'./include/sidebar.html'"></div>
</sidebar>
<!-- Page Content -->
<div id="{{$root.show ? 'page-wrapper':''}}">
this worked fine.. yet when ever page changes.. this condition is not reapplied :( so if i opened #/login i can see there is no sidebar, yet once i move to /home the sidebar doesnot show either.
can you please help ? i tried searching for hours with no success.
thanks
237
I don't see anything making use of your mainCtrl so I'm not sure how it's ever going to be used. I think what you may want to consider is an approach more like this:
angular.module('myApp')
.run(function($rootScope, $location, $routeParams) {
$rootScope.$on('$routeChangeSuccess', function(event, current) {
// Look at $location.path()
// If it isn't what you want, toggle showSideBar...
$rootScope.showSideBar = true|false;
}
}]);
Then your HTML could reference it like this:
<div ng-if="showSideBar" ng-include="'./include/sidebar.html'"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
