小编Ili*_*ani的帖子

在我从这个线程中借用的这个plunker示例中,有一个很棒的示例,说明如何使用AngularJs创建分页网格.(我的问题与这个类似的问题略有不同.)

在我们的一个项目中,我们有一个非常相似的解决方案,但为了获得一些帮助,我将使用上面提到的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) { …