CODEWITHSUNDEEP
angularjsangularjs-directiveionic-framework
rasmussvanejensen
rasmussvanejensen

Reputation: 427

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?

Upvotes: 7

Views: 2590

Answers (2)

amarmishra
amarmishra

Reputation: 613

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.

Upvotes: 0

Will Hitchcock
Will Hitchcock

Reputation: 4868

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

Upvotes: 9

Related Questions