Question

我正在尝试创建一个页面，其中我有一个固定的标题和更改内容，但固定标题取决于状态路由，我还希望标题和内容具有不同的控制器和模板。

例如，网址

/用户/：用户ID /简档

我希望标题显示用户名，因此需要知道：userId的值。

我可以通过使用命名视图和ui-router来实现这一点，但在这里我们编写了我想避免的重复代码

$stateProvider
            .state('profile', {
                url: '/user/:user_id/profile',
                views: {
                    'header': {
                        templateUrl: 'user-header.html',
                        controller: 'HeaderController'
                    },
                    'info': {
                        templateUrl: 'profile.html',
                        controller: 'ProfileController'
                    }
                }
            }) 
            .state('friends', {
                url: '/user/:user_id/friends',
                views: {
                    'header': {
                        templateUrl: 'user-header.html',
                        controller: 'HeaderController'
                    },
                    'info': {
                        templateUrl: 'friends.html',
                        controller: 'FriendsController'
                    }
                }
            })

<section id="startup-header" ui-view="header">

</section>

<section ui-view="info">

</section>

如何定义标题一次，但是每个内容类型都定义了内容。

我希望我能够以一种明确我想要实现的目标来制定问题。

Answer 1

确定。让我们试试这个：

您可以使用您的标题创建一个父页面，该标题将包含嵌套的子页面：

<div id="header">
    <a ui-sref="userPage.profile">Profile</a>
    <a ui-sref="userPage.friends">Friends</a>
    ......
</div>

<div ui-view>

</div>

详细了解ui-sref ditective here

在$stateProvider之类的内容：

$stateProvider.state('userPage.profile', {
            url: '/user/:user_id/profile',
            templateUrl: 'profile.html',
            controller: 'ProfileController'
        }
    }).state('friends', {
            url: '/user/:user_id/friends',
            templateUrl: 'friends.html',
            controller: 'FriendsController'
        }
    })

AngularJS ui-router：如何修改内容的固定标头？

1 个答案: