【问题标题】:Angular - how to link from one page to another page and scroll to an anchor in ionic without using idAngular - 如何在不使用 id 的情况下从一个页面链接到另一个页面并滚动到 ionic 中的锚点
【发布时间】:2016-07-11 21:19:10
【问题描述】:

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

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

更新

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

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

这是我做的代码:

文章列表查看:

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

文章视图:

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

控制器:

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

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

控制器:

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

查看:

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

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

【问题讨论】:

    标签: javascript angularjs ionic-framework


    【解决方案1】:

    如果您的评论部分有一个 id(例如 id="new-comment"),那么您可以从首页尝试:

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

    在控制器中:

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

    【讨论】:

    • 我刚测试过,第一次点击好像没有用,而且好像没有刷新或者记忆状态,因为当它开始工作时当我点击普通链接时,在我之前已经使用锚链接进入页面之后,它似乎记得并在该锚上打开页面,并且 url 具有该哈希值。 @Ladmerc
    猜你喜欢
    • 2017-03-05
    • 2015-03-29
    • 2020-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-25
    相关资源
    最近更新 更多