change ng include or define default ui view

Question

I have an angular webapp and I want a header for home page and different one for all other pages. My present html structure is

<html>
<body>
<ng-include="header.html">
<div data-ng-include="'header.html'"></div>
<section data-ui-view></section>
<div data-ng-include="'footer.html'"></div>
</body>
</html>

i want to include header-home.html when the page is home page. i tried writing the path of include in headerController and assign appropriate value depending on $location.path(). but it will run only once when page loads. when ui-view changes it wont run. I know i can assign different views in a state using ui-view but i have many routes and need to change a lot of config files if i wanna add a new view for header in all views.

Is there any way i can include the appropriate header from app.run so that it will change according to route or run the header controller every time a route changes or assign a default view to a state if not specified.?

Listen for state change event, and set a property in $rootScope / mainController scope. in your html use ng-if to include different headers based on the flag — mohamedrias
Glad to help. Just included that in answer for other's reference. — mohamedrias

mohamedrias mohamedrias · Accepted Answer · 2015-03-06T05:10:41

In app.run listen for state change event and based on the state change set a flag in $rootScope.

In your HTML:

Based on the flag use ng-if and include different header templates.

change ng include or define default ui view

1 Answers