转到页面的某些部分,嵌套视图 - Angular JS

时间:2018-02-22 12:02:17

标签: angularjs nested-views

您好我有一个页面,其中嵌入了视图注入我正在使用状态。问题是我有一个场景,在按钮点击我想要显示页面的某个部分或你可以说超链接。但我很困惑如何准确地去那个嵌套视图。我做了这样的事情。

<a href="username#media">More media</a>

但它总是不起作用,有时它显示确切的部分,但有时它的位置有点向下。

这是我的路线档案。

 .state('profile', {
            url: '/:artist_name?jobId',
            params: {
                artist_id: null,
                jobId: {value: null, squash: true},
                openRepertoire: {value: false, squash: true}
            },
            views: {
                '': {
                    templateUrl: 'views/profile/artistprofile.main.view.html',
                    controller: 'ArtistProfileMainController',
                    controllerAs: 'profile',
                }, 'basicInfo@profile': {
                    templateUrl: 'views/profile/basicInfo.view.html',
                    controller: 'ArtistProfileBasicInfoController',
                    controllerAs: 'basicInfo',
                }, 'header@profile': {
                    templateUrl: 'views/profile/header.view.html',
                    controller: 'ArtistProfileHeaderController',
                    controllerAs: 'header',
                }, 'quotes@profile': {
                    templateUrl: 'views/profile/quotes.view.html',
                    controller: 'ArtistProfileQuotesController',
                    controllerAs: 'quotes',
                }, 'schedule@profile': {
                    templateUrl: 'views/profile/schedule.view.html',
                    controller: 'ArtistProfileScheduleController',
                    controllerAs: 'schedule',
                }, 'media@profile': {
                    templateUrl: 'views/profile/media.view.html',
                    controller: 'ArtistProfileMediaController',
                    controllerAs: 'media',
             }, resolve: {
                $title: getUserProfile,
                user: isLogin
            }

        })

现在点击我想转到注入了media视图的那一部分页面。我也使用了anchorscroll。但结果并非总是100%完美。有时它会打开页面并显示媒体部分,有时它不会。

1 个答案:

答案 0 :(得分:0)

使用UI路由器,使用ui-sref指令supports using a # param链接到页内ID。要使用它,请将链接更改为以下内容:

`<a ui-sref="profile({'#': '<your div id goes here>'})"></a>`