Issue with using the same template for different states on ui-router

Question

I'm trying to use the same template for 2 different views. My set up is this

$stateProvider.state('me', { 
    url: '/me', 
    templateUrl: 'partial/profile/profile.html',
    controller: 'ProfileController'
  });

  $stateProvider.state('myteam', { 
    url: '/myteam', 
    templateUrl: 'partial/myteam/myteam.html',
    controller: 'MyteamController' 
  });


  $stateProvider.state('myteam.teamMember', { 
    url: '/:username', 
    templateUrl: 'partial/profile/profile.html',
    controller: 'ProfileController'
  });

However whenever I try and access myteam.teamMember, the URL changes but the view doesn't change. Anyone have any advice?

Answer 1

When you redirect to child state it looks for ui-view(it can be named view) on current state HTML, and load the state template in it. Basically you are redirecting to child state of myteam, so to get the changes on view you should have ui-view somewhere inside partial/myteam/myteam.html HTML file.

partial/myteam/myteam.html

<div>
 MY HTML

 ......

 .......

 <div ui-view></div>

</div>