Ember 1.12 Inject Route into Service

Question

I'm trying to create a service to handle modal dialogs in Ember 1.12 with Ember-cli. Maybe a service isn't the best way to approach this, but I want to access it from just about anywhere in the app, and be able to dynamically insert content into the popup, so it seemed like the right way to go.

Here is my service:

import Ember from 'ember';

export default Ember.Service.extend({
    route: Ember.inject.service('route'),
    open: function(content){
        console.log('open popup', content);

        this.get('route').render('popup-box', { //popup-box is a component
            into: 'application',
            outlet: 'popup'
        });
    },

    close: function(){
        //TODO
    }
});

When I call the open method, I get this error:

Uncaught Error: Attempting to inject an unknown injection: service:route

I'm not sure what I'm missing. Suggestions?

Answer 1

You should check out ember-wormhole, https://github.com/yapplabs/ember-wormhole . It will let you target a section of your template to an anchor somewhere else in the dom. It's perfect for modals!

Additional Info:

AS @runspired pointed out, you can't inject the router like you have it.

If you did want to inject the router, you could do so with Ember.inject.service('-routing') or via application.inject('<myTarget>', 'router', 'router:main'); from an initializer.

However, you do not have access to a render method and this could be considered a smell.