angularjs - 如何在 angular-ui bootstrap 分页指令中将 prevous-text 和 next-text 属性设置为 HTML 模板

Question

我要使用 http://angular-ui.github.io/bootstrap/#pagination
我需要将“上一个”、“下一个”指标设置为 html。

就像是:

<pagination 
    previous-text="'<span class="glyphicon glyphicon-arrow-left"></span>'"
    next-text="'<span class="glyphicon glyphicon-arrow-right"></span>'"
>
</pagination>

不幸的是，它返回解析的 html 而不是图标。

这是我想要实现的目标: http://plnkr.co/edit/q59XhTO0II1ZBz21Etj2?p=preview

Answer 1

这个答案基于@pkozlowski.opensource 评论:
将脚本标记添加到您的 html 文件中，如下所示，然后您就可以开始了:

<script id="template/pagination/pagination.html" type="text/ng-template">
<ul class="pagination">
    <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}">
        <a href ng-click="selectPage(1)" title="First Page"> 
            <span class="glyphicon glyphicon-fast-backward"></span>
        </a>
    </li>
    <li ng-if="directionLinks" ng-class="{disabled: noPrevious()}">
        <a href ng-click="selectPage(page - 1)" title="Previous Page">
          <span class="glyphicon glyphicon-step-backward"></span>
        </a>
    </li>
    <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}">
      <a href ng-click="selectPage(page.number)">{{page.text}}</a>
    </li>
    <li ng-if="directionLinks" ng-class="{disabled: noNext()}">
      <a href ng-click="selectPage(page + 1)" title="Next Page">
        <span class="glyphicon glyphicon-step-forward"></span>
      </a>
   </li>
   <li ng-if="boundaryLinks" ng-class="{disabled: noNext()}">
     <a href ng-click="selectPage(totalPages)" title="Last Page">
       <span class="glyphicon glyphicon-fast-forward"></span>
     </a>
   </li>
</ul>

我修改了原始模板并用 替换了分页文本字形 并添加 标题到自定义链接。