Angular directive not rendering in ionic app
Question
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?
2 answers
solution1
9 2015-10-15 18:20:20
My issue ended up being a little bit different than yours I guess. Upon further inspection I realized that I had a '/' before all of my templateUrls that was actually causing the issue
solution2
0 2016-12-15 18:35:56
I had the similar issue. This is due to the relative path in URL. This works fine in the browsers but not in App. I removed ../ from the URL path.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.