Starter project does not work correctly if controller is replaced by directive

ionic-v1
1

I am a newbie to ionic. I started with “ionic start myApp sidemenu” and tried to encapsulate the PlaylistsCtrl in a directive.

Original Code

.state('app.playlists', {
  url: "/playlists",
  views: {
    'menuContent': {
      templateUrl: "templates/playlists.html",
      controller: 'PlaylistsCtrl'
    }
  }
})

Modified Code

.state('app.playlists', {
  url: "/playlists",
  views: {
    'menuContent': {
      template: "<my-playlists></my-playlists>"
    }
  }
})

For the most part, this is working, except that the playlist is shifted up a little and is partially overlapped by the header. Looking at the CSS in the debugger, <ion-content> is missing the has-header class (which is responsible for setting “top: 44px;”). How can I fix this? Is there a limitation that I should not be using <ion-view> or <ion-content> inside custom directives?

2

Well, can someone tell me how <ion-content> automatically gets the .has-header class attached to it? That’s the basic issue that I am having. As soon as I put <ion-content> inside a directive, it does not get the .has-header class.