Mar*_*rco 5 javascript angularjs ionic-framework
我正在开发一个离子应用程序.其中包含我的主页上的文章列表,每篇文章都有一个评论图标,该图标应作为文章页面中评论部分的链接.
如何从该首页链接到文章页面评论部分的锚点?
更新
由于Angular在#之后使用"URL",因此无法通过id链接到锚点,这是在答案中建议的,所以我正在寻找另一种方法来实现它.我尝试了几种解决方案,但以下都没有效果.
在这里,有时我得到一个正确的顶部偏移值,但是当我改为另一个文章页面时,该值保持不变.
这是我做的代码:
文章列表查看:
<a ng-click="commentLink({{article.id}})">
<img class="social-images" src="icons/comment.svg"/> {{ article.comments.length }}
</a>
Run Code Online (Sandbox Code Playgroud)
文章查看:
<a name="comments-section"></a>
Run Code Online (Sandbox Code Playgroud)
控制器:
$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);
})
};
Run Code Online (Sandbox Code Playgroud)
我也试过这个,基于这篇文章,但仍然没有运气:
控制器:
$location.hash('comments-section');
var handle = $ionicScrollDelegate.$getByHandle('articleDelegate');
handle.anchorScroll(true);
Run Code Online (Sandbox Code Playgroud)
视图:
<ion-content delegate-handle="articleDelegate">
<a id="comments-section"></a>
Run Code Online (Sandbox Code Playgroud)
如果您的评论部分有一个 id(例如 id="new-comment"),那么从首页,您可以尝试:
<a ng-click="goToComment()">...</a>
Run Code Online (Sandbox Code Playgroud)
在控制器中:
$scope.goToComment = function() {
return $state.go('whatever the comment state is', {param:param}).then(function(state) {
$location.hash('new-comment');
$ionicScrollDelegate.anchorScroll(true)
})
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
793 次 |
| 最近记录: |