javascript - 滚动到 ng-repeat 中数组中最后添加的记录

Question

我尝试在 ngRepeat 指令中实现滚动到最后添加的条目。

我发现并调查了一些相关的 SO 问题:#1 , #2 .但是还是不能解决问题。

代码非常简单。 当用户向数组中添加新记录时， Controller 使用新添加项的名称广播“scroll-event”，然后指令接收此事件并滚动到列表中新添加的条目。

<div ng-controller="MainCtrl">
    <input ng-model="newItem" ng-keydown="$event.which === 13 && addNewItem(newItem)"/>
        <button ng-click="addNewItem(newItem)">Add</button>

        <div id="items-list" scroll-to-new-item> 
            <div ng-repeat="item in items | orderBy: 'name'">
                <input ng-model="item.name" ng-readonly="true"/>
            </div>
        </div>
 </div>

app.controller("MainCtrl", function($scope){
    $scope.items = [
        {id: 1, name: "aaa"}, {id: 2, name: "bbb"},         
        {id: 3, name: "ccc"}, {id: 4, name: "ddd"},
        .......
    ];

    $scope.addNewItem = function(newItem){
        $scope.items.push({name: newItem});
        $scope.$broadcast('scroll-event', newItem);
        $scope.newItem = "";
    };
});

这是我的指令，它应该滚动到列表中最后添加的记录。

app.directive("scrollToNewItem", function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('scroll-event', function (event, newValue) {
                if(newValue){
                    var newItemHeightPosition = // !!! MY ISSUE HERE !!!
                    $('#items-list').animate({
                        scrollTop: newItemHeightPosition
                    }, 'slow');
                }
            });
        }
    };
});

但我不知道如何获得新添加元素的顶部高度位置。我尝试了几种变体，但没有得到任何结果。例如，以下 jquery 选择器不起作用:

$('#items-list').find('input[value=' + newValue +']');
$('#items-list').find('input').eq(newValue);

请注意，数组是按字母顺序排序的，因此这会使这项任务复杂化。

This is my JSFiddle .

谁知道，如何解决这个问题？

提前致谢!

Answer 1

该代码中有两个问题。

1) 第一个问题是因为 ngRepeat 指令在 scrollToNewItem 指令开始之前没有在重复中呈现新添加的元素。

我已经通过在 $timeout 中包装 DOM 选择器来修复它.它提供了一个安全的方法来调用 $scope.$apply 并确保 $digest 循环已经过去。您可以在此处阅读更多详细信息:Angular $scope.$apply vs $timeout as a safe $apply .

2) 第二个问题与我呈现的输入项没有任何包含值的属性有关。因此，由于这个原因，我找不到任何具有以下 JQuery 选择器的 DOM 项。

$('#items-list').find('input[value=' + newValue +']')

我通过在 ngRepeat 指令中添加一个附加属性 value 来修复它。

value="{{vehicle.Name}}"

最后，我编辑的 JSFiddle 和您可以找到的工作示例 here .