Question

我尝试使用UI-Router的多个命名视图，但它不起作用。

请参阅以下示例以了解我的问题：

的start.html

<body ng-app="startApp">
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>
</body>

nav.html

<nav>
    <ul>
        <li>btn1</li>
        <li>btn2</li>
    </ul>
</nav>

content.html

<h1>My content</h1>

app.js

angular.module('startApp', ['ngAnimate', 'ui.router', 'ngFileUpload', 'ngImgCrop'])

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('start', {
        url: '/start',
        templateUrl: 'pages/start/start.html',
        controller: 'mainController'
    })

        .state('start.Why', {
        url: '/Why',
        views: {
            'navigation@start': {
                templateUrl: 'pages/start/nav.html'
            },
            'content@start': {
                templateUrl: 'pages/start/content.html'
            }
        }
    })
})

问题什么都没有显示。在ui-view中没有注入任何东西.. 但是，如果我的ui-view没有名称且我的ID视图为''而不是'navigation@start'，则可以显示 navigation.html ：

我尝试'@start'而没有。我无法解释这是什么问题。我的js控制台很清楚。

请帮帮我吗？

Answer 1

有a working plunker

我们需要的是在索引中创建'start'州的未命名 视图占位符ui-view=""。 HTML：

<body ng-app="startApp">

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

开始的视图现在不包含ng-app

<!--<body ng-app="startApp">-->
<div>
  <h1>This is a start state view</h1>

  <div>place for child state views</div>
  <hr />
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>
<!--</body>-->
</div>

就是这样......没有其他变化。没有root（start）有一个目标，而child（为什么）将被正确注入

观察action here

中的当前解决方案

同时检查：

Angular UI Router - Nested States with multiple layouts

Answer 2

作为我为你添加的链接。这个

  $stateProvider
    .state('start', {
    url: '/start',
    templateUrl: 'pages/start/start.html',
    controller: 'mainController'
})

    .state('start.Why', {
    url: '/Why',
    views: {
        'navigation@start.Why': {
            templateUrl: 'pages/start/nav.html'
        },
        'content@start.Why': {
            templateUrl: 'pages/start/content.html'
        }
    }
})

UI-Router多个命名视图无效

2 个答案:

Angular UI Router - Nested States with multiple layouts