Question

我正在使用ng-repeat来构建无序列表。我是这样做的：

<li id="listItem{{$index}}" ng-repeat="slide in data" ng-click="setActive(slide.slideIndex,$event)">
    <span class="listItemText">
    <b>{{slide.slideIndex + 1}}. </b>{{slide.Title}}
  </span>
</li>

我给每个<li>动态ID listItem0, listItem1, listItem2,....等我需要在我的控制器中获取该元素。我一直在尝试使用angular.element()，但我无法让它在我的生活中发挥作用。

我需要该元素的原因是因为在某些事件中，我需要我的动画库（TweenLite）自动滚动到该位置。您可以将元素传递给TweenLite，如下所示：

$scope.setActive = function(id, event)
{
    $scope.currentIndex = id;
    if (event) player.currentTime = $scope.data[id].time;
    if ($scope.autoScroll)
    {
        var target = document.getElementById("listItem" + id);
        TweenLite.to(slideList,0.5,{scrollTo:{y:target}});
    }
}

问题是target始终返回null。如果我将目标放在angular.element()内，我会得到一个巨大的对象而没有引用实际的<li>（我能够找到）。

我在这里做错了什么和/或我应该以不同的方式来对待这个问题？感谢。

修改

player.addEventListener("timeupdate", function()
{
    currentTime = player.currentTime;
    angular.forEach($scope.data, function(value, key)
    {
        if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
        {
            $scope.$apply(function()
            {
                $scope.setActive(key);
            });     
        }
    });
});

Answer 1

您传递的事件已包含对该元素的引用。试试这个：

TweenLite.to(slideList,0.5,{scrollTo:{y:event.target}});

AngularJS，通过动态ID获取元素？

1 个答案: