在 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>
Controller :
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);
});
});
最佳答案
首先，让我先说一下我从未使用过或看过 Angular。你有自己的 Angular 副本吗？随便看看，分页元素似乎是从 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>
您可以修改模板吗？如果是这样，您可以将 aria-label 添加到 <a>甚至以相同的方式从 paginationConfig 获取其文本。
我通过四处浏览发现了这个ui-bootstrap-tpls-0.12.1.min.js从你的笨蛋例子中。
关于angularjs - 将 Aria 标签添加到 Angular 分页网格以使其更易于访问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39244129/