Component communication

ember-cli 0.2.7

ember 1.13-beta2

Im trying to setup a component to handle overlays in my webapp. I want to be able to open this overlay from across the application but I'm having trouble figuring out how to do so. Here is what I got.

It seems like ember doesn't recognise the service though. Any help greatly apprechiated!

The service import Ember from 'ember';

export default Ember.Service.extend(Ember.Evented, {
  publish: function() {
    return this.trigger.apply(this, arguments);
  },
  subscribe: function() {
    this.on.apply(this, arguments);
  },
  unsubscribe: function() {
    this.off.apply(this, arguments);
  }
});

The navigation component

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'nav',
  classNames: ['l-navigation'],

  events: Ember.inject.service('event-bus'),

  actions: {
    openDashboard: function() {
      this.get('events').publish('dashboard:open');
    }
  }
});

And then the 'overlay' component

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNames: ['l-dashboard'],

  events: Ember.inject.service('event-bus'),

  init: function() {
    this.get('events').subscribe('dashboard:open', this, 'openDashboard');
  },

  openDashboard: function() {
    alert('opening dashboard');
  }
});