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

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.$ro​​otScope.Scope 。

通常，使用在此事件之后执行且没有延迟的超时应该不是问题，如下所示：

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

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

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

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

监视侦听器在与指令$digest()注册的监视侦听器相同的调用中触发。ng-show在处理完所有监视侦听器后，传递给的函数由 angular 执行，因此指令$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();
}