在滚动角页面加载后锚 [英] Scroll to anchor after page load in Angular

问题描述

我需要这样它加载了新的一页，然后，一旦在页面加载，滚动到页面上的锚点设置一个NG-Click事件。我试着提出了<每一个解决方案href=\"https://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs\">this SO帖子，但我不能让它正常工作。

I need to set an ng-click event so that that it loads a new page, and then, once the page has loaded, scrolls to an anchor point on the page. I've tried every solution proposed on this SO post but I can't get it to work correctly.

大多数围绕滚动到一个已经加载的页面上的锚这些解决方案中心。我需要滚动出现一个新的页面加载后。

Most of those solutions center around scrolling to an anchor on a page that's already loaded. I need the scroll to occur after a new page has loaded.

下面是我的看法code：

Here is my view code:

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

这再presents一个'个人资料卡内的按钮。当用户点击卡上，就带他们去一个个人资料页。然而，当他们按一下按钮，它需要带他们去（在code中的goToResultJobs（R）之前，因此$ stopPropogation（））的那个人资料页的#jobs部分。

This represents a button inside a 'profile card'. When the user clicks on the card, it takes them to a profile page. However, when they click the button, it needs to take them to the #jobs portion of that profile page (hence the $stopPropogation() before the goToResultJobs(r) in the code).

下面是我的goToResultJobs方法是什么样子。

Here is what my goToResultJobs method looks like.

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

我已经使用 $ anchorScroll ，只是在锚到 profileUrl ，但没有一个硬编码的作品尝试。我是相当新的角，所以我不知道我在这里失踪。

I've tried using $anchorScroll and just hardcoding in the anchor into the profileUrl, but neither one works. I'm fairly new to Angular, so I don't know what I'm missing here.

更新1：尝试使用$超时

下面是我的ResultsCtrl在我的 goToResultJobs 方法，当用户点击该按钮被触发：

Here is my goToResultJobs method within my ResultsCtrl that is triggered when the user clicks the button:

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

这是加载 /名称＃职位路径，它调用下面的ProfileCtrl：

That loads the /name#jobs path, which calls the ProfileCtrl below:

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);
    };
}]);

此设置似乎工作，为测试点击作业按钮时只出现在控制台上，而不是在用户只需点击该配置文件。我现在面临的问题是，该网页开始加载，并在URL栏上的路径​​ /名称＃职位，但页面加载完成后，<$前C $ C>工作从URL中剥离。因此，当 $ anchorScroll（）叫，有哈希没有锚标记滚动到。

This setup seems to work, as TEST only appears in the console when the jobs button is clicked, but not when the user just clicks on the profile. The problem I'm now facing is that the page starts loading, and the path in the url bar changes to /name#jobs, but before the page finishes loading, jobs is stripped from the url. Therefore, when $anchorScroll() is called, there is no anchor tag in the hash to scroll to.

推荐答案

因此​​，作为中指出，在 $ anchorScroll 的页面后发生已经呈现，否则锚不存在。这可以通过实现 $超时（）。

So as pointed out, the $anchorScroll has to occur after the page has been rendered, otherwise the anchor doesn't exist. This can be achieved using $timeout().

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

您可以看到这个plunkr 。确保在弹出的模式（在输出画面的右上角的蓝色小按钮）来查看。

You can see this plunkr. Make sure to view it in pop-out mode (the little blue button in the upper right corner of the output screen).

这篇关于在滚动角页面加载后锚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！