Question

我有一个隐藏项目列表。我需要显示列表，然后只需单击一下滚动到其中一个。我在这里复制了代码：http://plnkr.co/edit/kp5dJZFYU3tZS6DiQUKz?p=preview

正如我在控制台中看到的那样，在项目可见之前调用scrollTop（），所以我认为ng-show不是即时的，这种方法是错误的。它的工作原理是延迟使用scrollTop（），但我不想这样做。

还有其他解决方案吗？

Answer 1

在使用scrollTop()时，除了推迟调用ng-show之外，我没有看到任何其他解决方案。您必须等到模型中的更改反映在DOM中，以便元素变得可见。它们不会立即出现的原因是范围生命周期。 ng-show内部使用监视侦听器，只有在单击处理程序中执行完整代码后调用作用域的$digest()函数时才会触发该监视器。

有关范围生命周期的更详细说明，请参阅http://docs.angularjs.org/api/ng.$rootScope.Scope。

通常使用在此事件之后执行的超时并不会出现问题，如下所示：

setTimeout(function() {
    $(window).scrollTop(50);  
}, 0);

没有超时的替代解决方案：

但是，如果要避免超时事件（其执行可能在事件队列中的其他事件之前），并确保在单击事件处理程序中发生滚动。您可以在控制器中执行以下操作：

$scope.$watch('itemsVisible', function(newValue, oldValue) {
    if (newValue === true && oldValue === false) {
        $scope.$evalAsync(function() {
            $(window).scrollTop(50);
        });
    }
});

监视侦听器在与$digest()指令注册的监视侦听器相同的ng-show调用内触发。传递给$evalAsync()的函数在处理完所有监视侦听器后由角度执行，因此ng-show指令已经使元素可见。

Answer 2

您可以使用$anchorScroll 这是文档：

https://docs.angularjs.org/api/ng/service/$anchorScroll

示例：

$scope.showDiv = function()
{
   $scope.showDivWithObjects = true;
   $location.hash('div-id-here');
   $anchorScroll();
}

Angularjs：如何在ng-show显示隐藏元素后滚动页面？

2 个答案: