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);

替代方案没有超时:

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

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

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