子状态不会在父级中加载答案

【问题标题】：Child state doesn't load within parent子状态不会在父级中加载
【发布时间】：2016-06-16 16:12:11
【问题描述】：

我无法确定如何使用 UI 路由器构建路由代码。

在我的索引文件中，我调用了菜单模板和 2 个侧边栏模板，如下所示： index.html

<!-- head code above here -->
<body ng-app="ICP_App" ng-cloak>
    <div layout-fill layout="row" ng-controller="AppController as AppCtrl">
        <div ui-view="left-nav"></div>
        <div ui-view="right-nav"></div>
        <div ui-view="toolbar"></div>

        <!-- this is where I am expecting/wanting my dashboard template to load (and others when at the correct url-->
        <div class="page-content view" ui-view></div>

        <!-- footer code under here -->

我的路线：

$urlRouterProvider.otherwise('dashboard');

$stateProvider
    .state('root', {
        abstract: true,
        templateUrl: '../partials/icp_index.html',
        controller: 'AppController as AppCtrl',
        url: '',
        views: {
            'left-nav': {
                templateUrl: '../partials/left-nav.html'
            },
            'right-nav': {
                templateUrl: '../partials/right-nav.html'
            },
            'toolbar': {
                templateUrl: '../partials/toolbar.html'
            }
        }
    })
    .state('root.dashboard', {
        url: '/dashboard',
        templateUrl: '../partials/agency-dashboard.html',
        controller: 'AppController as AppCtrl'
    })

但是，菜单和侧边栏会加载，但主要内容区域是空白的。我想知道这是否与'.otherwise'有关？

我的索引文件应该包含菜单和侧边栏，然后是我上面指出的要加载的状态的内容——在本例中是仪表板模板。当 url 不正确或不完整时，'.otherwise' 用于显示仪表板（在索引文件中）。

提前致谢。

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

您必须为该 ui-view 命名，并且在您的子状态下，您需要指定和/或覆盖所需的视图，因此它类似于：

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

和状态定义：

.state('root.dashboard', {
        url: '/dashboard',
        views: {
            'main-content@root': {
                templateUrl: '../partials/agency-dashboard.html',
                controller: 'AppController as AppCtrl'
            }
        }
    })

您还应该有两个模板，一个只定义根 ui-view (index.html)，另一个是包含命名视图的 icp_index。这个 plunkr 显示了结构：

plnkr.co/edit/zjngTr0JU6cUGBtMsfN0

【讨论】：

感谢@frankies，但页面仍然呈现完全相同 - 菜单和侧边栏，中心没有内容
我想我明白你的问题是什么了。我认为您有两个模板， index.html 和 ../partials/icp_index.html ？它们应该分开，一个只定义根 ui-view，另一个是包含命名视图的 icp_index。我已经提出了一个 plunkr 表明这个问题已经解决。 plnkr.co/edit/zjngTr0JU6cUGBtMsfN0
我已经在您的 plunkr 中实现了更改，但是页面现在是空白的，并且我收到一个控制台错误（无论如何，菜单中的按钮与一个按钮有关）无限重复，就像它是不断地重新加载菜单。我在这里使用 Laravel，并设置了一个指向我的 index.html 视图的路由，但 UI-router 也会查找索引文件，是这样吗？
嗨@frankies，所以我的状态“工具栏”是问题所在 - 它显然与其他地方发生冲突。我进行了您的更改，但它反复加载工具栏，所以我将名称更改为 top-toolbar 并且没有问题。如果您想将您的评论添加到其他人的答案中，我很乐意将其标记为正确。
很高兴您能够修复它！在答案中添加了 plunkr ;-)