Question

在this plunker example我借用this thread，有一个很棒的例子，说明如何使用AngularJs创建分页网格。（我的问题与this similar question略有不同。）

在我们的一个项目中，我们有一个非常相似的解决方案，但为了获得一些帮助，我将使用上面提到的plunker中的代码。

我的目标：我想让屏幕阅读器更容易访问底部的分页网格这是通过在网格按钮中添加一些咏叹调标签来完成的，例如

aria-label="Go to first page"
aria-label="Go to previous page"
aria-label="Go to page 3"

等等。我该如何做到这一点？

最后，这是代码：

模板：

<!DOCTYPE html>
<html ng-app="todos">

  <head>
   <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js">    </script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="TodoController">
    <h1>Todos</h1>
    <h4>{{todos.length}} total</h4>
    <ul>
      <li ng-repeat="todo in filteredTodos">{{todo.text}}</li>
    </ul>
    <pagination 
      ng-model="currentPage"
      total-items="todos.length"
      max-size="maxSize"  
      boundary-links="true">
    </pagination>
  </body>
</html>

控制器：

var todos = angular.module('todos', ['ui.bootstrap']);

todos.controller('TodoController', function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:'todo '+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

Answer 1

首先，让我先说我从来没有使用或看过棱角分明。你有自己的角度副本吗？只是在四处寻找，分页元素似乎是从template/pagination/pagination.html中的模板生成的。当我查看该来源时，它有像

这样的东西

<li role="menuitem" ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-next">
   <a href ng-click="selectPage(page + 1, $event)" ng-disabled="noNext()||ngDisabled" uib-tabindex-toggle>{{::getText('next')}}
   </a>
</li>

您是否可以修改模板？如果是这样，你可以在<a>添加一个咏叹调标签，甚至可以从paginationConfig获得相同的文本。

我是通过你的掠夺者示例中的ui-bootstrap-tpls-0.12.1.min.js来找到这个。

Answer 2

如果可能，请升级ui-bootstrap版本。

Library现在是v2.4.0并支持从v0.14.0开始重写分页模板

之后，使用template-url覆盖pagination的默认模板。

template-url（默认：uib / template / pagination / pagination.html） - 使用提供的自定义覆盖组件的模板模板

复制代码库中的默认模板
根据需要修改
将template-url与文件路径添加到<pagination>标记。

PS：默认分页模板为here;请注意参考您正在使用的库版本的文档和模板。

修改使用template-url（ui-bootstrap v2.1.4）从我的代码中取样：

<div class="text-center"> <ul uib-pagination total-items="vm.totalCount" data-ng-if="vm.totalCount" ng-model="vm.page" items-per-page="vm.limit" boundary-links="true" max-size="3" template-url="app/core/components/pagination/pagination.html"> </ul> </div>

将Aria-labels添加到Angular分页网格中以使其更易于访问

2 个答案: