ui-sref在嵌套视图中不起作用 [英] ui-sref not working in nested views

问题描述

我完成的作业-在此网站上回顾了几乎8-9 ui-sref相关的问题(如何操作，复杂的示例等)，相关的问题，Scotch.io等.我似乎无法理解为什么我的代码无法正常工作.我花了6到7个小时调试应用程序，但似乎找不到问题.

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.

我的页面分为 a)layout.html-这将强制引导网格系统 b)app-navbar-顶部的导航栏(代码现在是引导程序示例的剪切-n-粘贴...) c)应用程序手风琴-使用ui引导手风琴显示n个项目 d)app-right-右侧包含一些UI元素和一个ui-grid

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

所有元素的ui视图均可正确呈现...即，在我的控制器中正在调用索引"状态.我在app-navbar.html中添加了几个简单的按钮，以进行调试...

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'
                }
            }
        })

当我将鼠标悬停在按钮上时，我看到.../view1和2显示在浏览器的页脚中，但是当我单击它们时，什么也没有发生.目前，手风琴仍然使用href，但是如果我使用ui-sref，它将停止工作.一旦我克服了这个问题，那就是下一个问题……如何将ui-sref用于类似手风琴的控件?

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?

关于可能发生的事情的任何想法? pl: http://plnkr.co/edit/c89j3eFvYyguMt0QznAI

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

推荐答案

有已更新的工作插销器.我进行了2次更改.

There is updated working plunker. I made 2 changes.

首先，我将您的版本升级为UI-Router 0.2.13 (修复了一些问题，只需始终使用最新版本即可)

其次，我在状态定义中添加了缺失的部分:谁是我的父母

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'
        }
    }
})

在此处

根据以下评论进行了扩展，文档中的引用很少

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

状态可以相互嵌套.嵌套状态有几种方法:

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

• 使用点符号" .例如.state('contacts.list', {}).
• 使用ui-router.stateHelper从嵌套状态树构建状态.由@marklagendijk提供.
• 使用 parent 属性，其父名称为字符串.例如: parent: 'contacts'
• 将 parent 属性与父对象一起使用.例如parent:contacts(其中"contacts"是一个stateObject)

• 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属性指定状态的父级.

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

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

这篇关于ui-sref在嵌套视图中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！