Question

我无法解决如何使用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'有关吗？

我的索引文件应该包含菜单和侧边栏，然后是我上面指出的加载状态的内容 - 在本例中是仪表板模板。当网址不正确或不完整时，“。altwise”会显示信息中心（在索引文件中）。

提前致谢。

Answer 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

子状态不会在父级内加载

1 个答案: