Ember ApplicationController inject not working

Question

I'm using Ember CLI 2.5.0. I have the below two controllers. I would like the pages controller to call a method or an action (either will do) in the ApplicationController.

However, I keep getting the error "ReferenceError: application is not defined"

I have tried using the older "needs" API. I tried the even older "controllerFor" method. I tried accessing the App directly and digging down to the controller. I was initially having issues calling this from within a promise and trying to use the "this" keyword, but got around that by declaring a locally scoped var. Nothing seems to be working. I feel like I am missing something simple as all of the aforementioned methods seemed to have worked for others.

In app/controllers/application.js:

import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        showModal: function(name, model) {
            this.displayModal(name, model);
        },
        removeModal: function() {
            this.disconnectOutlet({
                outlet: 'modal',
                parentView: 'application'
            });
        }
    },
    displayModal: function(name, model) {
        console.log(model);
        this.render(name, {
            into: 'application',
            outlet: 'modal',
            model: model
        });
    }
});

In app/controllers/pages.js:

import Ember from 'ember';

export default Ember.Controller.extend({
    application: Ember.inject.controller(),
    actions: {
        editPageFields: function(page) {
            page.get('fieldValues').then(function(){
                application.displayModal('page-edit-fields-modal', page);
            });
        }
    }    
});

Igor Igor · Accepted Answer · 2016-06-08T19:56:49

You need to access the application property with this.get('application').

page.get('fieldValues').then(() => {
   this.get('application').displayModal('page-edit-fields-modal', page);
});

Pay attention to the "fat arrow" which passes the scope inside your anonymous function, so you can use "this" from parent scope.

Ember ApplicationController inject not working

1 Answers