Is Ember supposed to fire all parent route hooks in link-to / transitionTo?

I am having a hard time understanding how the Ember router triggers hooks on nested resources during transition to transitions. This example does not involve dynamic segments.

Here's a contrived example that simulates my application:

App.Router.map(function() {
  //Modal resources
  this.resource('modal', function(){

    this.resource('posts', function(){
      this.route('new');
      this.route('edit')
    });

    this.resource('photos', function(){
      this.route('new');
      this.route('edit');
    });
})

      

        
        
        
      

    

In the FULL PAGE RELOAD of the message route, let's say we see that the beforeModel and afterModel transitions in App> Indexes> Modal routes are run sequentially. Okay, that makes sense.

Attempting URL transition to /modal/posts ember.js?body=1:3912
Transition #0: application: calling beforeModel hook ember.js?body=1:3912
Transition #0: application: calling deserialize hook ember.js?body=1:3912
Transition #0: application: calling afterModel hook ember.js?body=1:3912
Transition #0: modal: calling beforeModel hook ember.js?body=1:3912
Transition #0: modal: calling deserialize hook ember.js?body=1:3912
Transition #0: modal: calling afterModel hook ember.js?body=1:3912
Transition #0: posts: calling beforeModel hook ember.js?body=1:3912
Transition #0: posts: calling deserialize hook ember.js?body=1:3912
Transition #0: posts: calling afterModel hook ember.js?body=1:3912
Transitioned into 'posts' ember.js?body=1:3912
Transition #0: TRANSITION COMPLETE. 

      

        
        
        
      

    

However, when I click

{{link-to 'Go to Photos' 'photos'}}

      

        
        
        
      

    

in the modal.hbs template or in the posts.hbs template, it is not cascaded via Application> Index> Modal hook sequence. It only hits the most baby hooks for kids:

Attempting transition to photos ember.js?body=1:3912
Transition #1: photos: calling beforeModel hook ember.js?body=1:3912
Transition #1: photos: calling deserialize hook ember.js?body=1:3912
Transition #1: photos: calling afterModel hook ember.js?body=1:3912
Transition #1: Resolved all models on destination route; finalizing transition. 
Transitioned into 'photos' ember.js?body=1:3912
Transition #1: TRANSITION COMPLETE. 

      

        
        
        
      

    

Could some soul understand how a router should work, especially when going to hops? I want all parent routes "beforeModel / afterModel hooks" to be in sequence. From what I've researched (a lot), Ember should hit the entire parent route beforeModel / afterModel, top to bottom, on every transition.

Edit specifically for kingpin2K's answer: Ok that makes sense, but

App.Modal = Ember.Route.extend({

  model: function(params){
    //load some data that you want modal.photos to also have access to
    console.log('Modal route model hit')
  },

  afterModel: function(model) {
    this.transitionTo('modal.photos')
  }
});

      

        
        
        
      

    

redirects Modal twice to the parent route when navigating. 1) about hitting the Modal url directly and 2) back to the afterModel redirect (go to modal.photos). Under your explanation, the modal paths of the parent route (especially the model hook!) Won't fire on subsequent transition from modal (parent) to modal.photos (child), but they are. When you navigate to the parent "modal" route, you get two console logs.

Thanks again for your help.