使用 AngularJS 在 Ui-Router 中嵌套状态

Question

我想拥有一个包含所有常见视图（如标题和侧边栏）的通用状态，以及一个模板，我想在其中加载不同的视图，这些视图可以在状态变化时发生变化。

我有一个这样的索引 HTML 文件：

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

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

    <div class="container">
        <div class="wrapper">
            <div ui-view="content"></div>
        </div>
    </div>
...

虽然 AngularJS 的配置是这样的：

$stateProvider
    .state('mainCommonState', {
        url: '',
        abstract: true,
        views: {
            header: {
                templateUrl: 'app/common/header.html',
                controller: 'headerCtrl',
                controllerAs: 'vm'
            },
            sidebar: {
                templateUrl: 'app/common/sidebar.html',
                controller: 'sidebarCtrl',
                controllerAs: 'vm'
            },
            content: {}
        },
        resolve: {
            apiEnvironment: function ($q, environmentApiService) {
                var deferred = $q.defer();
                deferred.resolve(environmentApiService.getApiEnvironment());
                return deferred.promise;
            }
        }
    })
    .state('first-page-content', {
        url: '/first-page-content',
        parent: 'mainCommonState',
        views: {
            content: {
                templateUrl: 'app/components/first-page-content.html'
                controller: 'firstPageCtrl',
                controllerAs: 'vm'
            }
        }
    })
    .state('second-page-content', {
        url: '/second-page-content',
        parent: 'mainCommonState',
        views: {
            content: {
                templateUrl: 'app/components/second-page-content.html'
                controller: 'secondPageCtrl',
                controllerAs: 'vm'
            }
        }
    })
    .state('third-page-content', {
        url: '/third-page-content',
        parent: 'mainCommonState',
        views: {
            content: {
                templateUrl: 'app/components/third-page-content.html'
                controller: 'thirdPageCtrl',
                controllerAs: 'vm'
            }
        }
    })

由于某种原因，这不起作用：我有一个空视图，而不是我想在内容 ui-view 中显示的 3 个模板。

如果我在抽象状态中定义一个模板（甚至是空白模板），则始终显示的视图是抽象状态mainCommonState中的视图。

我哪里错了？

---

第一次编辑：在第一个答案之后更新

根据 Chris T 的建议，我更新了我的代码，但仍然缺少一些东西。

我创建了一个Plunker，因此您可以帮助我解决问题。

---

第二次编辑

根据 Chris T 的建议，我使用 content 视图的绝对路径更新了代码，现在内容切换正确。

我已经相应地更新了Plunker 并引入了新级别的嵌套视图（第一页中的选项卡），我希望在加载第一页内容时激活第一个选项卡。

如果我关注these solutions 并将第一页的 url 设置为空并将其设置为第一个选项卡，则此方法不起作用。

有什么建议吗？

Answer 1

您的视图定位到错误的名称ui-view。

.state('second-page-content', {
     url: '/second-page-content',
     parent: 'mainCommonState',
     views: {
         content: {
             templateUrl: 'app/components/second-page-content.html'
             controller: 'secondPageCtrl',
             controllerAs: 'vm'
         }
     }
 })

在这个 sn-p 中，它针对来自父状态 mainCommonState 的名为 content 的 UI 视图。但是，content ui-view 不是在 mainCommonState 中创建的。它是在根模板中创建的。

更改您的视图声明以将视图定位在正确的状态，例如，这以根状态的content 视图为目标（命名为空字符串）：

.state('second-page-content', {
     url: '/second-page-content',
     parent: 'mainCommonState',
     views: {
         'content@': {
             templateUrl: 'app/components/second-page-content.html'
             controller: 'secondPageCtrl',
             controllerAs: 'vm'
         }
     }
 })

在 ui-router 1.0 及更高版本中，您还可以通过使用感叹号前缀来使用绝对 ui-view 名称

.state('second-page-content', {
     url: '/second-page-content',
     parent: 'mainCommonState',
     views: {
         '!content': {
             templateUrl: 'app/components/second-page-content.html'
             controller: 'secondPageCtrl',
             controllerAs: 'vm'
         }
     }
 })

在 UI-Router 视图指南中了解有关视图定位的更多信息：

https://ui-router.github.io/guide/views#view-name-only