Uib Pagination：如何获取点击元素值及阻止点击"..."时滚动到顶部

我来帮你搞定这个问题！你已经实现了点击分页链接滚动到顶部，但想排除省略号的情况，其实可以通过事件委托+元素识别来实现，具体步骤如下：

1. 给分页组件添加点击事件监听 #

先在你的uib-pagination的<ul>标签上添加ng-click，传入$event对象以便后续判断点击目标：

<ul ng-show="$ctrl.projects.length > 10" 
    boundary-link-numbers="true" 
    rotate="false" 
    max-size="4" 
    previous-text="&lsaquo;" 
    next-text="&rsaquo;" 
    ng-change="$ctrl.pageChanged()" 
    uib-pagination 
    total-items="$ctrl.projects.length" 
    ng-model="$ctrl.currentPage" 
    items-per-page="$ctrl.projectSize"
    ng-click="$ctrl.handlePaginationClick($event)">
</ul>

2. 在控制器中编写点击处理逻辑 #

uib-pagination生成的省略号元素默认带有uib-pagination-ellipsis类，我们可以通过这个类来判断是否点击了省略号，然后阻止滚动行为：

// 控制器中添加方法
$ctrl.handlePaginationClick = function(event) {
    // 检查点击的元素（或其父元素）是否是省略号
    const clickedEllipsis = event.target.classList.contains('uib-pagination-ellipsis') || 
                           event.target.closest('.uib-pagination-ellipsis');
    
    if (clickedEllipsis) {
        // 阻止默认跳转行为
        event.preventDefault();
        // 阻止事件冒泡，避免触发ng-change里的滚动逻辑
        event.stopPropagation();
    }
};

3. 配合pageChanged方法优化（如果滚动逻辑在这里） #

如果你的滚动到顶部逻辑是写在pageChanged里的，还可以加个标志位来控制：

$ctrl.isEllipsisClick = false;

$ctrl.handlePaginationClick = function(event) {
    const clickedEllipsis = event.target.classList.contains('uib-pagination-ellipsis') || 
                           event.target.closest('.uib-pagination-ellipsis');
    $ctrl.isEllipsisClick = clickedEllipsis;
    
    if (clickedEllipsis) {
        event.preventDefault();
        event.stopPropagation();
    }
};

$ctrl.pageChanged = function() {
    // 只有不是点击省略号时，才执行滚动
    if (!$ctrl.isEllipsisClick) {
        window.scrollTo(0, 0);
    }
    // 重置标志位
    $ctrl.isEllipsisClick = false;
};

这样设置后，点击正常的分页数字/上一页/下一页时会正常滚动到顶部，而点击省略号...时就不会触发滚动啦！

内容的提问来源于stack exchange，提问作者kianncs