Question

我的应用有一个问题。应用程序聚合了一些事件列表 - 每个事件列表都包含几个部分（描述，发言者，位置等）。在主页面上我有事件列表（图像，+一些链接）。当我点击图像时 - 应用程序正在切换到事件详细信息（它的不同路径，控制器和视图）。现在一切都好。但是当用户点击名为＆＃34; location＆＃34;在事件列表主页上 - 应用程序不仅应该重定向到事件详细信息视图，还应该向下滚动到名为location的部分。

我们用过：

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

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

所以我们用以下内容包装：

{{1}}

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

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

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

Answer 1

一种可能的解决方案是创建一个属性指令观察范围内的加载属性并将内容滚动到带有此指令的元素。您可以在知道后切换$scope.loaded 一切都装满了。您可以在指令的链接功能中访问元素和范围。所以你可以在里面做$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属性，等待所有内容都加载后再渲染此页面。在这种情况下，您可以确保滚动到正确的位置

加载所有异步数据和图像后滚动到锚点

1 个答案: