javascript - 加载所有异步数据和图像后滚动到 anchor

Question

我的应用程序有一个问题。应用程序聚合了一些事件列表 - 每个事件由几个部分组成(描述、演讲者、位置等)。在主页上我有事件列表(图像，+一些链接)。当我单击图像时 - 应用程序正在切换到事件详细信息(它是不同的路线、 Controller 和 View )。现在一切都好了。但我希望当用户单击事件列表主页上名为“位置”的链接时，应用程序不仅应重定向到事件详细信息 View ，而且应向下滚动到名为位置的部分。

我们使用:

$document.scrollTo(document.getElementById('my_id'), 70);

嗯 - 它有效，但事件详细信息 Controller 中的一些数据以异步方式从 firebase 加载 - 所以 id 有效，但在加载数据(和图像)后 - 滚动位置保持不变，但页面内容向下移动(因为数据已加载)并且所有内容都以错误的滚动位置结束。

所以我们用以下内容包装它:

$timeout(function() {
           $document.scrollTo(document.getElementById('my_id'), 70);
}, 1000);

它很有帮助 - 实际上滚动机制会等待 1 秒，并且在加载所有数据和图像后 - 应用程序向下滚动并且滚动处于良好位置。

除此之外，我们认为这是相当糟糕的解决方案 - 有时甚至会失败 - 特别是当网络速度较慢并且数据和图像加载时间超过 1 秒时。当然，我们可以将超时设置为 2 秒 - 但问题仍然相同。

在加载所有异步数据以及加载和渲染所有图像后，是否有机会以某种方式绑定(bind)(或广播然后绑定(bind))到事件？我尝试了在互联网上找到的每个解决方案(anchorScroll、jquery img load、在获取所有 firebase 元素后广播事件以及每个事件后 countinuus 滚动)，但没有运气。

Answer 1

一种可能的解决方案是创建一个属性指令 监视范围上的已加载属性并将内容滚动到 具有该指令的元素。当您知道时，您可以切换 $scope.loaded 一切都已加载。您可以在指令的 link 函数中访问元素和范围。所以你可以在里面执行 $document.scrollTo(element, 70); 。

angular.module('app').directive('scrollTo', function($document) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch('loaded', function() {
        $document.scrollTo(element, 70);
      });
    }
  };
});

您还可以在路由中使用 resolve 属性来等待所有内容加载完毕，然后再渲染此页面。在这种情况下，您可以确保滚动到正确的位置