Satyadev Satyadev - 6 months ago 74
AngularJS Question

How to apply conditional ui-views in angular js

By default, I want to load a Home page with signup/login option where there is no header or footer in this page. Once the user logged-in successfully, I am redirecting user to loggedIn.html page where the page has a fixed header, sidebar and footer.

The problem is how to prevent the header, sidebar and footer getting applied when I load Home page.

Stateprovider:

var sidebar = {
templateUrl: 'views/SideBar.html',
controller: function ($scope) {
}
};

$stateProvider
.state('Home', {
url: "/Home",
views: {
sidebar: sidebar, //Commented this line out but didn't work
content: {
templateUrl: 'views/Home.html',
controller: function ($scope) {
}
}
}
})


If you see in the above code, I commented out the line for sidebar view but it is still taking up place for side bar on to Home page

Html:

<div id="wrapper">

<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<div ui-view="content"></div>

</div>

<div ui-view="footer"></div>

Answer

Use an ng-if based on $state.current.name so your header div tag would look something like this:

<div ui-view="header" ng-if="$state.current.name!='home'">
Comments