Ember: Bubble action from component to application controller

Question

I have a component in ember, which needs to send an action (with one parameter) to the application controller. No matter where this component is rendered, it needs to call the exact same action, on application controller.

application-controller

export default Ember.Controller.extend({
  actions: {
    addAlert: function(message) {
      this.set('message', message);
    },
    removeAlert: function(message) {
      this.set('message', message);
    }
  }
});

How do I handle this? From start, to end.

Answer 1

Actions don't bubble up through controllers, when an action is triggered it will go through the current route's controller, if nothing handles it there it bubbles up to the current route all the way up to the top level route (application).

If that action has to set a property on the controller you can set it directly from the application route (although it is not recommended).

// routes/application.js
actions {
  addAlert(message) {
      this.controller.set('message', message);
    },
    removeAlert(message) {
      this.controller.set('message', message);
    }
}

For more information read up on action bubbling .