Angular UI router nested views when targeting parent

Question

Given this snippet

$stateProvider
    .state('authorized', {
        abstract: true, 
        template: "<div ui-view='page'>hello</div>"
    })
    .state('task', {
      parent: 'authorized',
      abstract: true,
      url: '/task',
    })
    .state('task.create', {
      url: '/create',
      'views': {
        'page@authorized': {
          template: "word<div ui-view='boom'>replaced</div>",
          views: {
            'boom': {
              template: "up"
            }
          }
        }
      }
    })

I was expecting to see "word up", instead I see "word replaced" - I think I'm misunderstanding how angular ui targets parent states, help appreciated.

Demo plunk: http://plnkr.co/edit/69kdcy?p=preview

Were you looking for this? youtube.com/watch?v=MZjAantupsA

Ed_
– Ed_

2014-12-16 21:41:45 +00:00
Commented Dec 16, 2014 at 21:41 — Ed_
– Ed_, Commented Dec 16, 2014 at 21:41

Community · Accepted Answer · 2017-05-23 10:28:56Z

2

I updated that plunker with this change:

    .state('task.create', {
      url: '/create',
      'views': {
          'page@authorized': {
             template: "word<div ui-view='boom'>replaced</div>",
          },
          '[email protected]': {
              template: "up"
          }
        }
    })

So, what is different? The views definition is on the same level. Because we want to inject boom into current state template, we have to append its name at the end '[email protected]'

Check it here

If you do not mind, check this Q & A to see how I try to use nesting for standard layout

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Dec 17, 2014 at 4:15

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Radim Köhler Over a year ago

Great sir, Enjoy UI-Router ;)

Collectives™ on Stack Overflow

Angular UI router nested views when targeting parent

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related