Custom Directives Not Working


EDIT: I have found that the source of my original problem is that I am using custom directives, which others seem to have encountered an issue with, but none of the recommended solutions are working for me. Are there any suggestions out there for how to make a custom directive appear in the emulator (or, more importantly, on the iphone).

Here is what I have tried. None of this has worked.

  1. Moving the directives and controllers into the same file
  2. Changing element directives to attribute directives (i.e <div my-directive></div> instead of <my-directive></my-directive>
  3. Adding the CSS display: block to my element directives
  4. Adding <ion-view><ion-content> tags around the directives, both within the directive templates, and then outside of the templates around the directives themselves in the parent templates.

Any other suggestions greatly appreciated. My original post is below.

Hello! I have been building my app by using ionic serve to test it in the browser, where it works just fine, but when I tried running

ionic build ios
ionic emulate ios

a large portion of the application (the entire grid) is missing. I’m not sure where to start looking for bugs with this and would love some advice!

The only thing I can think of is that the part that isn’t showing up in emulate is an angular directive… but again it works in the browser.

Here is the project on github, thanks for any suggestions!


So i semi-solved the problem, meaning when I use --livereload, everything shows up as expected. This is great but I have no idea why, can anyone explain this?


Hi @galenc,

I’ve noticed similar layout issues. My workaround is to allow local network sharing so the Ionic server can be accessed from my phone’s browser.

Steps for a Mac:
Apple > System Prefs > Sharing > “Internet Sharing” checked ON
and then either Apple > System Prefs > Network to see your local IP, or in Terminal:

ipconfig getifaddr en1
ipconfig getifaddr en0

…any of these 3 commands.

Good luck,