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

Question

我想在 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”，然后它立即跳转到我的 anchor :

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

如何避免这种情况？

Answer 1

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

在这种情况下，您当前的方法存在两个问题。第一个是您的 ng-click 将在新 View 加载并可见之前触发，因此它不会滚动到该元素。第二个是 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)并将页面滚动到它。