title: How do I call a controller action from an Ember route while doing a transition?
body: <p>My objective is to display a fancy "loading..." graphic on my page while Ember fetches model data through the Ember route.</p>
  
  <p>This led me to <a href="http://emberjs.com/guides/routing/loading-and-error-substates/">http://emberjs.com/guides/routing/loading-and-error-substates/</a>.  That inspired me to create an action on my page's controller which would show the "loading" overlay window in the DOM.  For example, here's my controller:</p>
  
  <p><strong>controllers/users.js:</strong></p>
  
  <pre><code>export default Ember.ArrayController.extend({
      ...
      actions: {
          displayLoading: function() {
              // Show the DOM element that says "Loading..."
          },
          ...
      }
  });
  </code></pre>
  
  <p>I'd like to call that while my data is loading, so I then define a route as follows:</p>
  
  <p><strong>routes/users.js:</strong></p>
  
  <pre><code>export default Ember.Route.extend({
      model: function( params ) {
          return this.store.find('user', params );
      },
  
      actions: {
          loading: function(transition, originRoute) {
              transition.send('displayLoading');
          }
      }
  });
  </code></pre>
  
  <p>But when I do this, I get this error:</p>
  
  <p><code>Uncaught Error: Nothing handled the action 'displayLoading'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.</code></p>
  
  <p>So my question is <strong>where can I define this action so that my <code>loading</code> method will be able to call it?</strong></p>
  
  <p>Note that trying <code>this.send('displayLoading')</code> gave me this error:</p>
  
  <p><code>Can't trigger action 'displayLoading' because your app hasn't finished transitioning into its first route. To trigger an action on destination routes during a transition, you can call .send() on the Transition object passed to the model/beforeModel/afterModel hooks.</code>.</p>
  
  <p><strong>Update:</strong> I am able to catch this action on the route itself, but then I still can't call the action on my controller.</p>
  
  <p><strong>Update #2:</strong> Thanks to @kingpin2k's answer, I've resolved this.  For those interested, here is a full solution:</p>
  
  <p><strong>controllers/users.js:</strong></p>
  
  <pre><code>export default Ember.ArrayController.extend( {
      actions: {
          showLoading: function() {
              this.set('isLoading', true);
          },
  
          hideLoading: function() {
              this.set('isLoading', false);
          },
      }
  });
  </code></pre>
  
  <p><strong>routers/users.js:</strong></p>
  
  <pre><code>export default Ember.Route.extend({
  
      model: function( params ) {
          return this.store.find('user', params );
      },
  
      actions: {
          loading: function() {
              this.controllerFor('users').send('showLoading');
          },
          didTransition: function() {
              this.controllerFor('users').send('hideLoading');
          }
      }
  
  });
  </code></pre>
  
  <p>A key insight was that I can set an <code>isLoading</code> property on my controller which determines whether my modal "Loading..." window is showing in the Handlebars template.  </p>