angularjs – 在页面加载后滚动到锚点

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

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

这是我的视图代码

<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

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

$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仅在单击作业按钮时才出现在控制台中,但在用户只需单击该配置文件时才会显示.我现在面临的问题是页面开始加载,并且url栏中的路径更改为/ name#作业,但在页面完成加载之前,作业将从URL中删除.因此,当$an​​chorScroll()被调用时,哈希中没有锚标签可以滚动到.

所以如上所述,$anchorScroll必须在页面呈现之后发生,否则锚不存在.这可以使用$timeout()来实现.
$timeout(function() {
  $anchorScroll('myAnchor');
});

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

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...