2

在我的 Angular 应用程序中，需要发生以下事件序列：

  1. 用户单击按钮
  2. 通过翻转 ng-show 绑定到的布尔范围变量来显示以前隐藏的 div
  3. 新显示的视图位于页面下方，应滚动到视图中。

目前，滚动不起作用，因为这一切都发生在同一个摘要中。这意味着 ng-show 绑定变量的新状态没有机会更新 DOM。因此，我们尝试滚动到就 DOM 而言尚不可见的元素。

这可以通过使用 $timeout 包装滚动调用来缓解，这会强制所有摘要在尝试滚动之前完成。虽然这行得通，但感觉就像是 hack，我想知道是否有更好的方法来做到这一点。

这是一个演示问题的小提琴：

http://jsfiddle.net/fNhnj/3/

（请注意，此代码是我的真实代码的简化版本，只是为了演示问题，我意识到它没有遵循最佳实践。请放心，我的真实代码不会在控制器中执行直接的 DOM 操作。）

看法：

<div ng-app="app" ng-controller="MyCtrl" id="container">
    <button ng-click="scroll()">Unhide element and scroll</button> (will not work until $timeout call is uncommented)
    <div style="height:1000px; background-color: #ddddd0">
    </div>
    <div id="target" ng-show="isVisible">section to scroll to</div>
</div>

JS：

angular.module("app", [])

.controller('MyCtrl', 
    function MyCtrl($scope, $timeout) {
        $scope.isVisible = false;
        $scope.scroll = function() {
            $scope.isVisible = true;
            // uncommenting the $timeout fixes it, but feels like a hack
            //$timeout(function() {
                $('body').animate({
                    scrollTop: $("#target").offset().top
                }, 500);
            //});
        };
    }
);
4

1 回答 1

6

使用 $timeout 并不是什么大问题，因为您正在运行的代码不是 Angular 代码，您需要以某种方式与 Angular 进行通信以使其需要刷新视图。

于 2014-01-24T12:03:56.383 回答