nested ui-view error

[Luddinus]

Hi.

I have nested view like this

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

And this routes

   $stateProvider.state('main', {
        url: '/',
        controller: 'MainController as main',
        template: require('./main.html')
    });

     $stateProvider.state('main.profile', {
        url: 'profile',
        views: {
            'content': {
                controller: 'ProfileController as profile',
                template: require('./profile.html')
            }
        }
    });

And I get this error: Cannot read property 'name' of undefined
at getUiViewName

I'm using 0.3 version...

What Am I missing?

[christopherthielen]

is require() happening synchronously somehow? Generally require() means AMD, which is async. template: wouldn't work with async function. That's the first thing I noticed in your code.

Can you try switching to templateUrl: './profile.html' etc and see what happens?

[Luddinus]

It worked with previous version I think.

I changed this way and it works, I'll try more things later

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

[christopherthielen]

if you can reproduce the error code in a plunker, I'd be happy to take a look

http://bit.ly/UIR-Plunk

[homerjam]

Hi @christopherthielen

I've also noticed this issue - would appreciate any thoughts: http://plnkr.co/edit/tYl0WK?p=preview

Thanks!

[MWallenberg]

This started showing up in my application as well. It started when updating from 0.2.18 to 0.3. I'm not sure what causes it yet, but will post back here if I manage to figure it out.

[egantz]

Hey, joining the gang. I am also experiencing this issue and I do and templateUrl in each route config.

Any ideas?

[MWallenberg]

I downgraded to the previous legacy versiom for now - then it works again.
Den 30 maj 2016 3:42 em skrev "Eyal Gantz" notifications@github.com:

Hey, joining the gang. I am also experiencing this issue and I do and
templateUrl in each route config.

Any ideas?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#2763 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AEydyvjIPYWS1x1hKf9c9tFILuLqGM6qks5qGulWgaJpZM4Ijqjv
.

[christopherthielen]

introduced by this commit fde64e1

[christopherthielen]

@Luddinus @homerjam @MWallenberg @egantz

I've figured out what's causing this bug; before 0.3.0 the element.data('$uiView', data) didn't happen until the $ViewDirectiveFill was linked. Now, it happens earlier; when the $ViewDirective is linked. The Fill directive is walking up the DOM looking for inherited $uiView data on the elements, and finding the not-yet-filled copy of the parent ui-view, which doesn't have a state applied yet.

I'll figure out how to fix this bug.

---

In the meantime, can you explain why you'd create a nested ui-view like this?

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

This makes no sense to me.

Also, the original bug report's state definition doesn't seem to match the reported HTML:

// unnamed view has nowhere to plug into???
$stateProvider.state('main', {
        template: require('./main.html')

...

     $stateProvider.state('main.profile', {
        views: {
            'content': {

Can somebody explain what the intention is of this setup?

[homerjam]

Great thanks @christopherthielen.

I realise this structure looks a bit weird but its a simplification of a setup I've used quite a few times. However I started doing this a couple of years ago so maybe its no longer necessary to do so. I'll try and dig out my original rationale from my memory.

One use case is to provide a simple way to resolve app-wide dependencies - I can do this by adding them to an abstract parent state definition which uses the main view - then any child states will have access to those dependencies. This also allows me to have a sibling view (beside content) such as a menu which remains constant across the app but requires data from the server to render for the first time.

I think another reason it helps to do it like this is for when pre-rendering the app for SEO - its easier to ensure you have everything loaded as there is a distinct structure to follow.

Aren't nested views pretty handy in general anyway (or is it specifically this setup that seems unusual)? Do you have any thoughts on a better solution?

[christopherthielen]

@homerjam nested views are certainly useful. The plunker's specific setup (a single template with a nested ui-view inside of an outer ui-view) is weird. Generally a template has one ui-view, or multiple sibling ui-views.

<ui-view name="main">
  <ui-view name="content">
  </ui-view>
</ui-view>

When a state's view fills in the "main" ui-view, the inner html is replaced by the new template (the "content" ui-view is then gone) and so the "content" view cannot be targeted anymore. On the other hand, if a state doesn't fill in the "main" ui-view, so it can instead fill the "content" ui-view, then what's the point of the "main" view?

---

This makes sense to me:

<ui-view name="main">
</ui-view>
<ui-view name="content">
</ui-view>

This also makes sense to me:

<ui-view name="main">
</ui-view>

.state('main', {
  views: { 
    main: { template: "<ui-view name="content"></ui-view>" }
  }
})

.state('main.child', {
  views: { 
    content: { template: '<h1>content</h1>' } 
  } 
});