ui-sref not working in nested views

问题

Homework I've done - reviewed almost 8-9 ui-sref related questions (how to, complex examples, etc.) on this site, the related plunks, Scotch.io, etc. I can't seem to figure why my code is not working. I've spent 6-7 hours debugging the app and I can't seem to find the issue.

My page is divided into a) layout.html - this forces the bootstrap grid system b) app-navbar - nav bar on top (code is cut-n-paste of bootstrap example for now...) c) app-accordion - uses the ui bootstrap accordion to display n number of items d) app-right - right side comprises some UI elements and a ui-grid

The ui-view for all elements render correctly ... i.e., the "index" state is being called in my controller. I added a couple of simple buttons in app-navbar.html just to debug...

<ul class="nav nav-pills">
    <li role="presentation" class="active"><a ui-sref="view1">View1</a></li>
    <li role="presentation"><a ui-sref="view2">View2</a></li>
</ul>
<div ui-view="view-test"></div>

here's a snippet of my controller code:

        .state('view1', {
            url: '/view1',
            views: {
                'view-test': {
                    templateUrl: 'view1.html',
                    controller: 'View1Ctrl'
                }
            }
        })

When I hover over the buttons, I see that the .../view1 and 2 show up on the browser's footer but when I click them nothing happens. For now, the accordion still uses href but it stops working if I use ui-sref. Once I get past this, that's the next question ... how do you use ui-sref for controls like accordion?

Any ideas on what might be going on? The plunk: http://plnkr.co/edit/c89j3eFvYyguMt0QznAI

回答1:

There is updated working plunker. I made 2 changes.

Firstly I upgraded your version to UI-Router 0.2.13 (fixes some issues, simply always use the latest)

Secondly, I added the missing piece in state defintion: who is my parent

.state('view1', {
    url: '/view1',
    parent: 'index',        // here is explicit setting who is parent
    views: {
        'view-test': {
            templateUrl: 'view1.html',
            controller: 'View1Ctrl'
        }
    }
})

Check it here

EXTENDED, based on the comment below, with few cites from documentation

Methods for Nesting States

States can be nested within each other. There are several ways of nesting states:

• Using 'dot notation'. For example .state('contacts.list', {}).
• Use the ui-router.stateHelper to build states from a nested state tree. Courtesy of @marklagendijk.
• Using the parent property with the parent name as string. For example: parent: 'contacts'
• Using the parent property with the parent object. For example parent: contacts (where 'contacts' is a stateObject)

...

Parent Property using State Name String

Alternately, you can specify the parent of a state via the parent property.

$stateProvider
  .state('contacts', {})
  .state('list', {
    parent: 'contacts'
  });

来源：https://stackoverflow.com/questions/27073820/ui-sref-not-working-in-nested-views