In Angular ui-router nested state url changes,but template is not loading

Question

I am using ui-router for nested states & views. When I click on the link, the URL changes to the URL for the substate, but the template does not load.

For exampl

Answer 1

First of all change file name project.settings.html in templateurl and file name to projectSettings.html (remove dot).

   .state('project.settings', {
         url: "/settings",
          views:{
               "content":{templateUrl: "partials/projectSettings.html"},
               "header":{templateUrl: "partials/header"}
           }
    }) 

Add two divs in the project template to load the sub pages (header abd projectSettings)

Note: Any content in this divs will be replaced with the page loaded here.

project.html

     <div ng-controller="userController">
        <div class="details">
            <a ui-sref=".settings" class="btn btn-primary">Settings</a>
        </div>
        <div ui-view="header">( Project Page header will replace with projectSettings header )</div>
        <div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div>

    </div>

Answer 2

I had the same issue and the solution was to place ui-view to your parent's template. Because your partials also need a too, if they will be loading a template from a child state. See here https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing

Answer 3

If using nested views with UI-router, be sure to add ui-view into the html of the parent page and include specific named views.

Answer 4

I had the same issue, the solution was; open the project.html file (which is the parent page) and wrap everything within <ui-view>

So, replace these:

<div ng-controller="userController">
  <div class="details">
    <a ui-sref=".settings" class="btn btn-primary">Settings</a>
  </div>
</div>

with these:

<ui-view>
 <div ng-controller="userController">
   <div class="details">
     <a ui-sref=".settings" class="btn btn-primary">Settings</a>
   </div>
 </div>
</ui-view>

and you will be good to go ;)

Answer 5

Your nested project.settings state needs to address the view in the higher state explicitly using an '@' suffix, ie.:

.state('project.settings', {
        url: "/settings",
        views:{
              "content@":{templateUrl: "partials/project.settings.html"},
              "header@":{templateUrl: "partials/header"}
        }
 }) 

See more details here https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

Answer 6

Use ui-sref="project.settings" for link in project.html template.