Angular - 如何从一个页面链接到另一个页面并在不使用id的情况下滚动到离子中的锚点

I am developing an ionic app. Which has a listing of articles on my home page, and each article has a comment icon which should serve as a link to comment section in the article page.

我正在开发一个离子应用程序。其中包含我的主页上的文章列表,每篇文章都有一个评论图标,该图标应作为文章页面中评论部分的链接。

How can I link from that front page to go to an anchor on the comment section in the article page?

如何从该首页链接到文章页面评论部分的锚点?

Updated

Since Angular uses "URLs" after the # , it won't work to link to an anchor by id, that was suggested in the answer, so I am looking for another way to do it. I have tried several solutions but none of the following didn't work.

由于Angular在#之后使用“URL”,因此无法通过id链接到锚点,这是在答案中建议的,所以我正在寻找另一种方法来实现它。我尝试了几种解决方案,但以下都没有起作用。

Here, sometimes I get a correct value for top offset, but when I change to another article page, the value stays the same.

在这里,有时我得到一个正确的顶部偏移值,但是当我改为另一个文章页面时,该值保持不变。

This is the code I have done:

这是我做的代码:

Article list View:

文章列表查看:

<a ng-click="commentLink({{article.id}})">
              <img class="social-images" src="icons/comment.svg"/> {{ article.comments.length }}
            </a>

Article View:

<a name="comments-section"></a>

Controller:

$scope.commentLink = function(articleId) {
    return $state.go('main.article', {id: articleId}).then(function(state) {
      var position = $ionicPosition.offset(angular.element(document.getElementsByName('comments-section')));
      console.log(position.top);
      $ionicScrollDelegate.scrollTo(position.left, position.top);
    })
  };

I have also tried this, based on an this article, but still no luck:

我也试过这个,基于这篇文章,但仍然没有运气:

Controller:

$location.hash('comments-section');
  var handle = $ionicScrollDelegate.$getByHandle('articleDelegate');
  handle.anchorScroll(true);

View:

<ion-content delegate-handle="articleDelegate">

<a id="comments-section"></a>

1 个解决方案

#1

If your comment section has an id (eg. id="new-comment"), then from the front page, you can try:

如果你的评论部分有一个id(例如id =“new-comment”),那么从头版开始,你可以尝试:

<a ng-click="goToComment()">...</a>

And in controller:

在控制器中:

$scope.goToComment = function() {
  return $state.go('whatever the comment state is',           {param:param}).then(function(state) {
    $location.hash('new-comment');
    $ionicScrollDelegate.anchorScroll(true)
  })
 }

#1