Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular - how to link from one page to another page and scroll to an anchor in ionic without using 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.

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>
like image 311
Ludwig Avatar asked Oct 30 '22 00:10

Ludwig


1 Answers

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

<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)
  })
 }
like image 116
Ladmerc Avatar answered Nov 11 '22 03:11

Ladmerc