我将 Angular 与 UI-Router 一起使用，但无法使用多个视图

Question

我有以下代码：

 app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/map');
    $locationProvider.html5Mode(true);

    $stateProvider
        .state('map', {
            url: '/map',
            templateUrl: 'Views/templates/layout.html'

        })
        .state('map.controls', {
            url: '',
            views: {
                'ddldistricts': {
                    templateUrl: 'Views/templates/ddl.districts.html',
                    controller: 'DistrictsListController'
                },
                'ddldistributors': {
                    templateUrl: 'Views/templates/ddl.distributors.html',
                    controller: 'DistributorsListController'
                },
                'ddlmanufacturers': {
                    templateUrl: 'Views/templates/ddl.manufacturers.html',
                    controller: 'ManufacturersListController'
                }
            }
        });
    }]);

layout.html 看起来像这样：

<h1>Controls</h1>
<div class="row">
<div class="col-md-3">
    <div ui-view="ddldistricts"></div>
</div>
<div class="col-md-3">
    <div ui-view="ddldistributors"></div>
</div>
<div class="col-md-3">
    <div ui-view="ddlmanufacturers"></div>
</div>

正在显示布局模板，但 none 的其他视图...我做错了什么？

我知道这很简单，但出于某种原因我无法理解。

Answer 1

有a working plunker

如果我们希望 child 成为默认值（而不是它的 parent），我们将 parent 标记为 abstract: true

.state('map', {
    url: '/map',
    abstract: true,
    ...
})

然后 child 与空 url 用作默认重定向：

.state('map.controls', {
    url: '',
    ...

检查一下here

但以防万一，我们不想使用抽象状态，我们想要一个更聪明的解决方案——我最喜欢一个：

此外，link 文档（描述摘要：真正的解决方案）

How to: Set up a default/index child state

我将 Angular 与 UI-Router 一起使用，但无法使用多个视图

I am using Angular with UI-Router and can't get multiple views to work

state

nested

view

angularjs

angular-ui-router