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?

I'm just now running into this same problem. It appears that any directive with a templateUrl will not load that template externally once the app is built in iOS. Were you able to figure this issue out? — Will Hitchcock
– Will Hitchcock, Commented Jan 18, 2015 at 22:07
I haven't solved it yet. I gave up and copied the markup in everywhere. I have the problem even before built. — rasmussvanejensen
– rasmussvanejensen, Commented Jan 22, 2015 at 9:05
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. — Will Hitchcock
– Will Hitchcock, Commented Jan 22, 2015 at 15:43
Same thing with templateUrl not rendering directives on android — FabioCosta
– FabioCosta, Commented Jun 4, 2015 at 20:09
@WillHitchcock Thank you very much, this did the trick for me! — Jakob O.
– Jakob O., Commented Aug 20, 2015 at 13:38

Will Hitchcock · Accepted Answer · 2015-10-15 18:20:20Z

9

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

answered Oct 15, 2015 at 18:20

Will Hitchcock

4,9083 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Richard Salt Over a year ago

Had a similar issue, the problem was with the template url having ../ at the front of it

James Pearson Over a year ago

Relative paths work great in the browser, but not in the compiled app. Thanks Will for saving me on this one :)

amarmishra · Accepted Answer · 2016-12-15 18:35:56Z

0

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.

answered Dec 15, 2016 at 18:35

amarmishra

6136 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular directive not rendering in ionic app

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related