CODEWITHSUNDEEP
angularjsangular-ui-router
hcliff
hcliff

Reputation: 443

Angular UI router nested views when targeting parent

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

Upvotes: 1

Views: 517

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123851

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

Upvotes: 2

Related Questions