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>
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)
})
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With