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?
Put a debugger; statement inside the constructor of your directive. Then you'll know for sure when it's working and you can remove it. Make sure you have selector: '[magicFeature]' and not selector: 'magicFeature' Sometimes you need to restart your ng serve to make sure everything is refreshed.
Add the following code in the directives/ionic-input. ts file. We need to import import { IonicInputDirective } from '../directives/ionic-input. directive'; in home.
Ionic supports Angular 6.0. 0 and up .
To do that you can use the Angular CLI command “ng add” to import Ionic packages to the existing project. The following command will help you to do that. After successful package installation, you will take the output as follows. Then you must initialize your existing project with Ionic by using the following command.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With