Managing Dependencies Between Controllers Edit Page

Sometimes, especially when nesting resources, we find ourselves needing to have some kind of connection between two controllers. Let's take this router as an example:

1
2
3
4
5

Router.map(function() {
  this.route('post', { path: '/posts/:post_id' }, function() {
    this.route('comments', { path: '/comments' });
  });
});

If we visit a /posts/1/comments URL, our Post model will get loaded into a PostController's model, which means it is not directly accessible in the CommentsController. However, we might want to display some information about it in the comments template.

To do this, we inject the PostController into the CommentsController (which has the desired Post model).

1
2
3

export default Ember.Controller.extend({
  postController: Ember.inject.controller('post')
});

Once comments has access to the PostController, a read-only alias can be used to read the model from that controller. In order to get the Post model, we refer to postController.model:

1
2
3
4

export default Ember.Controller.extend({
  postController: Ember.inject.controller('post'),
  post: Ember.computed.reads('postController.model')
});

1
2
3
4
5
6
7

<h1>Comments for {{post.title}}</h1>

<ul>
  {{#each model as |comment|}}
    <li>{{comment.text}}</li>
  {{/each}}
</ul>

For more information about aliases, see the API docs for aliased properties. If you have more extensive "data sharing" needs across your app, see the services page, which largely replaces injected controllers.