With multiple views my child template is not loading, in Angular UI when URL changes

Question

I've seen a few questions like this, so forgive me if I've overlooked a crucial detail from them.

When I load http://localhost:8000/characters/#/mages/detail/3 I get redirected to my 'otherwise' url: $urlRouterProvider.otherwise("/users");

But my state provider (if I've understood this correctly) should load the correct page:

  $stateProvider
    .state('users', {
      url: "/users",
      templateUrl: DjangoProperties.STATIC_URL + "partials/users.html"
    })
    .state('users.list', {
      url: "/list",
      templateUrl: DjangoProperties.STATIC_URL +  "partials/users.list.html",
      controller: 'UserListCtrl'
    })
    .state('users.detail', {
      url: "/detail/{userID:int}",
      templateUrl: DjangoProperties.STATIC_URL +  "partials/users.detail.html",
      controller: 'UserDetailCtrl'
    })
    .state('mages', {
      url: "/mages",
      templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
    })
    .state('mages.list', {
      url: "/list",
      templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
      controller: 'MageCtrl'
    })
    .state('mages.detail', {
         url: "/detail/{mageID:int}",
         views:{
            "@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "partials/mages.detail.html",
                controller: 'MageCtrl',
            },
            "characteristics@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            }, 
            "attributes@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            }, 
            "skills@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            }, 
            "spells@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "partials/spells.html"
            }, 
        }
    });
  }]);

Here is my mages.html:

<h1>Mages</h1>
<hr/>
<a ui-sref="mages.list">Show List</a>
<div ui-view></div>

and my mages.detail.html

<h4>{{mage.name}}</h4>
<div ui-view>
  <div ui-view="characteristics"></div>
  <div ui-view="attributes"></div>
  <div ui-view="skills"></div>
  <div ui-view="spells"></div>
</div>

None of these are loaded, just the default 'list' page.

I feel I've gotten muddled over my view names, but I can't figure out what to do to fix them?

score 1 · Answer 1 · answered Feb 27 '15 at 12:18

I tried to adjust your settings, and show you one possible way.

There is a working plunker

So, these would be new states mages:

.state('mages', {
  url: "/mages",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
})
.state('mages.list', {
  url: "/list",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
  controller: 'MageCtrl'
})

where detail is child of the list

.state('mages.list.detail', {
     url: "/detail/{mageID:int}",
     views:{
       /*
        "@mage.detail": {
            templateUrl: DjangoProperties.STATIC_URL +  "partials/mages.detail.html",
            controller: 'MageCtrl',
        },
        */
        "" : {
          templateUrl: "tpl.html",
        },
        "characteristics@mages.list": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            template: "common_partials/characteristics.html",
        }, 
        "attributes": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            template: "common_partials/attributes.html"
        }, 
        "skills": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            template: "common_partials/skills.html"
        }, 
        "spells": {
            //templateUrl: DjangoProperties.STATIC_URL +  "partials/spells.html"
            template: "partials/spells.html"
        }, 
    }
});

And these are two basic tmplates

mages.html (as it was, no change):

<h1>Mages</h1>
<hr/>
<a ui-sref="mages.list">Show List</a>
<div ui-view></div>

The mages.list.html

<h3>The mages list</h3>
<h4>{{mage.name}}</h4>

<li><a href="#/mages/list/detail/1">mages/list/detail/1</a>
<li><a href="#/mages/list/detail/2">mages/list/detail/2</a>
<li><a href="#/mages/list/detail/3">mages/list/detail/3</a>
<li><a href="#/mages/list/detail/4">mages/list/detail/4</a>

<hr /> 

<div >
  <div ui-view=""></div>
  <div ui-view="characteristics"></div>
  <div ui-view="attributes"></div>
  <div ui-view="skills"></div>
  <div ui-view="spells"></div>
</div>

It is now containing the links to detail and also contains the anchor for detail views

score 1 · Accepted Answer · answered Feb 27 '15 at 12:31

There is another working plunker

In case we want to have only two levels

mages
mages.list
mages.deatil

We have to adjust the state def like this:

.state('mages', {
  url: "/mages",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
})
.state('mages.list', {
  url: "/list",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
  controller: 'MageCtrl'
})
.state('mages.detail', {
     url: "/detail/{mageID:int}",
     views:{

        "": {
            templateUrl: DjangoProperties.STATIC_URL +  "partials/mages.detail.html",
            controller: 'MageCtrl',
        },
        "state@mages.detail" : {
          templateUrl: "tpl.html",
        },
        "characteristics@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            template: "common_partials/characteristics.html",
        }, 
        "attributes@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            template: "common_partials/attributes.html"
        }, 
        "skills@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            template: "common_partials/skills.html"
        }, 
        "spells@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "partials/spells.html"
            template: "partials/spells.html"
        }, 
    }
});

And the mages.list.html will be now like this (no place for child detail)

<h3>The mages list</h3>
<h4>{{mage.name}}</h4>

<li><a href="#/mages/detail/1">mages/detail/1</a>
<li><a href="#/mages/detail/2">mages/detail/2</a>
<li><a href="#/mages/detail/3">mages/detail/3</a>
<li><a href="#/mages/detail/4">mages/detail/4</a>

And the mages.detail.html wil be:

<div >

  <a ui-sref="mages.list">back to list</a>

  <div ui-view="state"></div>
  <div ui-view="characteristics"></div>
  <div ui-view="attributes"></div>
  <div ui-view="skills"></div>
  <div ui-view="spells"></div>
</div>

check it here

This is great, and works much better than my attempt! My only confusion is that you're swapped out `templateUrl` for `template`...is this just to show us what appears without having to populate those files? So the only real change is that my name for the main state was `"@mage.detail"` when it should have been `""`..why is that? — AncientSwordRage, Feb 27 '15 at 14:14
Sorry for confusion! ;) I was just lazy....... ;) ;) ;) so instead of creating the `"fileInsideOfTemplateUrl"` I just changed that into `templateUrl` int `template` - so the content (the template name) became the template itslef;) **sorry**. that was my small cheat. And yes... @mages.detail is needed but check my name "mages.detail" is not "mage.detail" it must be same as the state name (the S at the end) — Radim Köhler, Feb 27 '15 at 14:17
That's ok what about the second part? I would have thought that `"@mage.detail"` would work... — AncientSwordRage, Feb 27 '15 at 14:19
I'd explain it this way. 1) If we are in child state, and we want to target parent views it menas: we can use `"viewName"` only. `"viewName@parent"` will work as well but is redundant. 2) if we need to place our view into other than parent state - we **MUST** provide full absolute name. e.g. `"viewName@child"` is a must if we target views in child itself. Hope it hleps.... — Radim Köhler, Feb 27 '15 at 14:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71883/discussion-between-pureferret-and-radim-kohler). — AncientSwordRage, Feb 27 '15 at 14:25

Radim Köhler · Answer 3 · 2015-02-27T15:10:50.430

I would like to show how the view naming is working. There is a working plunker

So, let's have this index.html:

<H1><ui-view name="title" /></H1>

<ul>
  <li><a ui-sref="parent">parent</a>
  <li><a ui-sref="parent.child">parent.child</a>
</ul>

<div ui-view=""></div>

There is one unnamed view, and one named (title). We have two states. and both will be targeting this 'title' view:

  .state('parent', {
      ...
      views : {
        ...
        "title" : {
          template : "parent is setting title inside of index.html"
        }
      }
  })
  .state('parent.child', { 
      ...
      views : {
        ...
        "title@" : {
          template : "CHILD is setting title inside of index.html"
        },
      }              
  })

What we can see, is that parent calls the view "title" (relative name). The reason is, that index.html (root view) is its parent. The absolute name would work as well (and in fact is created behind the scene): "title@"

On the other hand, child must use absolute naming, because it targets view which is not part of the parent... it is grand-parent (root). So the view name is: "title@"

Now, child template, injected into parent is:

<div>

  <h4>Child</h4>

  <hr />

  View A:
  <div ui-view="viewA" ></div>
  View B:
  <div ui-view="viewB" ></div>

</div>

and that means that child state definition now will be:

 .state('parent.child', { 
      ...
      views : {
        "" : {
          templateUrl: 'tpl.child.html',
          controller: 'ChildCtrl',
        },            
        "viewA@parent.child" : {
          template : "<h5>child content of the view A</h5>"
        },
        "viewB@parent.child" : {
          template : "<h5>child content of the view B</h5>"
        }
        ... // title into the root
      }          
 })

So firstly we injected child template into parent unnamed view "": {...

And next we inject some views (existing inside of this child) with absolute naming === using the child full state name "viewB@parent.child"

Check it in action here

Documentation:

Multiple Named Views

...

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

With multiple views my child template is not loading, in Angular UI when URL changes

3 Answers3

Multiple Named Views

Linked