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

**URL:** <https://forum.ionicframework.com/t/starter-project-does-not-work-correctly-if-controller-is-replaced-by-directive/26280>\
**Category:** ionic-v1\
**Created:** [June 12, 2015, 9:49pm UTC](https://forum.ionicframework.com/t/starter-project-does-not-work-correctly-if-controller-is-replaced-by-directive/26280 "2015-06-12T21:49:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nareshbhatia](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nareshbhatia/32/79273_2.png) [@nareshbhatia](https://forum.ionicframework.com/u/nareshbhatia)\
**Post date:** [June 12, 2015, 9:49pm UTC](https://forum.ionicframework.com/t/starter-project-does-not-work-correctly-if-controller-is-replaced-by-directive/26280/1 "2015-06-12T21:49:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![nareshbhatia](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nareshbhatia/32/79273_2.png) [@nareshbhatia](https://forum.ionicframework.com/u/nareshbhatia)\
**Post date:** [June 14, 2015, 1:49pm UTC](https://forum.ionicframework.com/t/starter-project-does-not-work-correctly-if-controller-is-replaced-by-directive/26280/2 "2015-06-14T13:49:40Z")

</div>

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.