$anchorScroll 仅在 ng-view 加载之后，而不是之前答案

【问题标题】：$anchorScroll only after ng-view load, not before$anchorScroll 仅在 ng-view 加载之后，而不是之前
【发布时间】：2014-03-17 12:38:50
【问题描述】：

在我的 ng-view div 中加载新内容后，我想在页面顶部自动滚动。

于是我实现了$anchorScroll，并调用了一个函数跳转到页面顶部：

"use strict";

angular.module("someApp")
  .controller("ScrollCtrl", function($scope, $location, $anchorScroll) {
    $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
    }
  });

当我点击“下一步”按钮时，我想先加载新页面，然后跳转到顶部。但是，当然，我点击“a-tag”，然后它立即跳转到我的锚点：

 <a ng-href="#/ropute/to/new/content" ng-click="scrollTo('question_content')" >

我怎样才能避免这种情况？

【问题讨论】：

这里是下一个按钮？。同一个锚标签？？
下一个按钮位于所示的 a-tag 内。在我的情况下，ng-href 是一个通过范围动态更改的模型。这在这里无关紧要。
我不擅长 angularjs，这是我的疑问。如果 a-tag 中的按钮，那么单击事件将如何到达按钮？
这不是问题。按钮工作，锚工作，路由工作......我只是想防止在加载下一页之前跳转到顶部。

标签： javascript angularjs

【解决方案1】：

那么您要做的是导航到/route/to/new/content，然后自动向下滚动到question_content 元素？

在这种情况下，您当前的方法存在两个问题。第一个是您的ng-click 将在新视图加载并可见之前触发，因此它不会滚动到元素。第二个是Angular已经使用url哈希来存储当前位置（除非你在$locationProvider上调用html5Mode()）。因此将位置哈希设置为question_content 不会滚动到具有该ID 的元素，它会告诉Angular 尝试加载question_content 的路由，我假设你没有。

所以我会将您的 HTML 更改为：

<a ng-href="#/route/to/new/content?scroll_to=question_content">

然后在您的 body 元素（或您的 ng-view 所在的同一元素）上设置一个指令，该指令侦听 $viewContentLoaded 事件，查找 scroll_to 位置搜索参数，查找该元素，计算它的顶部偏移量（通过 jQuery）并将页面滚动到它。

【讨论】：