Question

我有一个简单的ng-repeat，它使用overflow-x：auto样式填充包装器内的大量表列。结果是一个水平滚动条，其中包含大量信息，如下所示： http://www.websitecodetutorials.com/code/photo-galleries/css-horizontal-scroller1-demo.php

每次范围的数据发生变化时，表格都会使用新的信息列进行更新和刷新。我的问题变成..我怎样才能强制它在每次初始化时一直滚动到最后？我的第一次尝试是建立一个这样的指令并指定＆＃34; scroller＆＃34;作为包装器的一个属性：

app.directive('scroller', function() {
  return {
    // Restrict it to be an attribute in this case
    restrict: 'A',
    // responsible for registering DOM listeners as well as updating the DOM
    link: function(scope, element, attrs) {
      $(this).animate({ scrollLeft: '+=5200' }, 800, function() { });
    }
  };
});

如何让控制器重新加载数据然后滚动＆＃34; scrollLeft＆＃34; 100％到最后（按顺序）？我已经设法在jQuery中破解它并在其他事件触发时滚动它，但这不是最佳的，因为它应该在更新周期结束时发生。

Answer 1

在将更新后的元素添加到DOM之前，会调用链接函数，这可能就是您的动画调用无法正常工作的原因。尝试添加超时，看看是否有效：

app.directive('scroller', function($timeout) {
  return {
    // Restrict it to be an attribute in this case
    restrict: 'A',
    // responsible for registering DOM listeners as well as updating the DOM
    link: function(scope, element, attrs) {
      $timeout(function() {
        element.animate({ scrollLeft: '+=5200' }, 800, function() { });
      }, 1);
    }
  };
});

我没有对此进行测试，但我认为如果它有帮助我会发布它。

Angular＆amp; jQuery：从控制器或指令水平滚动div

1 个答案: