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?

One of the cookbooks in the ember JS guides is about modals. I remember implementing modals using that technique and it worked fine. I'm not sure about your example. — Christopher Milne
Sounds like you just need a component to be put into any route that needs it. You can insert dynamic content in a few ways. — Epirocks

justinaray justinaray · Accepted Answer · 2015-10-27T15:30:50

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.

Ember 1.12 Inject Route into Service

1 Answers

Additional Info: