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
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
Share Improve this question edited Dec 19, 2016 at 14:12 030 11.7k15 gold badges86 silver badges127 bronze badges asked Feb 28, 2015 at 4:15 Momen ZalabanyMomen Zalabany 9,01716 gold badges80 silver badges144 bronze badges1 Answer
Reset to default 7I 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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744365912a4570702.html
评论列表（0条）