Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular directive not rendering in ionic app

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?

like image 710
rasmussvanejensen Avatar asked Nov 20 '14 09:11

rasmussvanejensen


People also ask

Why directive is not working in Angular?

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.

How do you add directives in Ionic?

Add the following code in the directives/ionic-input. ts file. We need to import import { IonicInputDirective } from '../directives/ionic-input. directive'; in home.

Does Ionic support Angular 11?

Ionic supports Angular 6.0. 0 and up .

Can we convert Angular app to Ionic?

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.


1 Answers

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

like image 107
Will Hitchcock Avatar answered Oct 12 '22 16:10

Will Hitchcock