Ionic has-header + ionic-side-menus not working

Hey everyone I've been running into some issues with the header and scrolling on the side menus.

Although I've taken it out from this snippet, i've tried putting class/attr has-header in just about every possible combination:

<ion-side-menus>

  <ion-side-menu-content>

    <ion-header-bar class="bar-dark">
      <button class="button icon ion-arrow-left-a" ng-click='back()'></button>
      <h1 class="title">Ionic Shopping Checkout</h1>
      <button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
    </ion-header-bar>

    <ion-purchase></ion-purchase> // custom directive

    <ion-purchase-footer></ion-purchase-footer> // custom directive

  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
  </ion-side-menu>

</ion-side-menus>

Additionally, my ng-repeat of items in the side menu isn't scrolling, even when I nest them in an ion-scroll element. This is likely a completely unrelated issue, however I'm curious if anyone has come across that issue too.

Thanks for all the help in advance!

As mentioned above, the has-header attribute has in fact been removed. However, the has-header class still exists. Generally speaking, you don't need to manage those now.

I've setup a sample that should solve all of your problems.

http://codepen.io/calendee/pen/Fuejf

The key points are the same as those comments above, you content needs to go inside the ion-content directives.

Here is the HTML:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Side Menus</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
  </head>

  <body>

    <div ng-controller="AppController">       
      <ion-nav-view></ion-nav-view>
    </div>

    <script id="app.html" type="text/ng-template">
      <ion-side-menus>

        <ion-side-menu-content>
          <ion-nav-bar class="bar-dark">
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>
          </ion-nav-bar>
          <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
            </button>
          </ion-nav-buttons>
          <ion-nav-view name="appContent"></ion-nav-view>
        </ion-side-menu-content> 

        <ion-side-menu side="left">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Left Menu</h1>
          </ion-header-bar>
          <ion-content>
            <ion-cart ng-controller='CartController'></ion-cart>
          </ion-content>
        </ion-side-menu>
      </ion-side-menus>
    </script>

    <script id="home.html" type="text/ng-template">
      <ion-view title="Ionic Shopping Checkout">
        <ion-content padding="true">
          <ion-purchase></ion-purchase>
        </ion-content>
      </ion-view>
    </script>

    <script id="ionCart.html" type="text/ng-template">
      <div class="list">

        <div class="item" ng-repeat="item in data.items">{{item.label}}</div>
      </div>
    </script>

  </body>
</html>

Here is the JS:

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "app.html"
    })
    .state('app.home', {
      url: "/home",
      views: {
        'appContent' :{
          templateUrl: "home.html",
          controller : "HomeController"
        }
      }
    })

  $urlRouterProvider.otherwise("/app/home");
})

.controller('AppController', function($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

.controller("HomeController", function($scope) {

})

.controller("CartController", function($scope) {

  $scope.data = {
    items : []
  };

  for(var i = 0; i < 25; i++) {
    $scope.data.items.push({
      id : i,
      label : "Item " + i
    })
  }

})

.directive("ionCart", function() {
  return {
    restrict : "E",
    templateUrl : "ionCart.html"
  }
})

.directive("ionPurchase", function() {
  return {
    restrict : "E",
    template : "<h2>This is Ion Purchase</h2>"
  }
})