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并引入了一个新级别的嵌套视图（第一页中的选项卡），我希望在加载第一页内容时激活第一个选项卡。< / p>

如果我关注these solutions并将第一页的网址设置为空并将其设置为第一个标签，则无效。

有什么建议吗？

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'
         }
     }
 })

在此代码段中，它定位来自父级状态content的名为mainCommonState的ui视图。但是，content未创建mainCommonState ui-view。它是在根模板中创建的。

更改视图声明以将视图定位到正确的状态，例如，这会定位根状态的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

带有AngularJS的Ui-Router中的嵌套状态

1 个答案:

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