I am using Ionic framework to create an application.
I need to be able to reuse and change my app header so I declare my two different headers as directives using my working markup.
app.directive('headerSidebar', function(){
return {
templateUrl: 'templates/header-main.html',
restrict: 'E'
};
});
app.directive('headerBack', function(){
return {
templateUrl: 'templates/header-back.html',
restrict: 'E'
};
});
When I try to call the directives with <header-sidebar></header-sidebar> or <header-back></header-back> nothing happens.
My html is valid and my template urls are correct. I have tried changing the names of both my directives and my templates but nothing worked.
I am using the Ionic sidebar layout and I call my directives inside my ion-nav-view:
<body ng-app="starter">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<sidebar></sidebar>
</ion-side-menus>
</body>
Any suggestions to how I could solve this or reorganize my code to better include the header bars?