在Angular中加载页面后滚动到锚点

Question

我需要设置一个ng-click事件,以便它加载一个新页面,然后,一旦页面加载,滚动到页面上的一个锚点.我已经尝试过在这个SO帖子上提出的每个解决方案,但我无法让它正常工作.

大多数解决方案都围绕滚动到已加载的页面上的锚点.我需要在加载新页面后进行滚动.

这是我的观看代码:

<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>

这表示"个人资料卡"中的按钮.当用户点击卡片时,它会将他们带到个人资料页面.但是,当他们单击按钮时,需要将它们带到该配置文件页面的#jobs部分(因此代码中的goToResultJobs(r)之前的$ stopPropogation()).

这是我的goToResultJobs方法的样子.

$scope.goToResultJobs = function(result) {
    var profileUrl = result.slug;
    window.location = profileUrl;
};

我已经尝试过使用$anchorScroll并且只是在锚中硬编码profileUrl,但是没有人工作.我对Angular很新,所以我不知道我在这里缺少什么.

更新1:尝试使用$ timeout

这是我goToResultJobs在ResultsCtrl中的方法,当用户单击按钮时触发该方法:

$scope.goToResultJobs = function(result) {
    var url = window.location + result.slug + '#jobs';
    location.replace(url);
};

加载/name#jobs路径,调用下面的ProfileCtrl:

app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
    if(window.location.hash) {
        $timeout(function() {
            console.log('TEST');
            // $location.hash('jobs');
            // $location.hash('jobs');
            $anchorScroll();
        }, 1000);
    };
}]);

此设置似乎有效,因为TEST仅在单击"作业"按钮时出现在控制台中,而不是在用户单击该配置文件时出现.我现在面临的问题是页面开始加载,并且网址栏中的路径更改为/name#jobs,但在页面完成加载之前,jobs将从网址中删除.因此,在$anchorScroll()调用时,要滚动到的哈希中没有锚标记.

Answer 1

正如所指出的那样,$anchorScroll必须在页面渲染之后发生,否则锚点不存在.这可以通过使用来实现$timeout().

$timeout(function() {
  $anchorScroll('myAnchor');
});

你可以看到这个plunkr.确保以弹出模式(输出屏幕右上角的蓝色小按钮)查看它.

Answer 2

也许您可以在页面加载后使用原生 Javascript 的Element.scrollIntoView() ？