如何在 angular-ui bootstrap 分页指令中将 prevous-text 和 next-text 属性设置为 HTML 模板 [英] How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

问题描述

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

I'm going to use http://angular-ui.github.io/bootstrap/#pagination I need to set 'previous', 'next' indicators as html.

类似:

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

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

Unfortunately it returns parsed html instead of icons.

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

Here is a plunker with what I want to achieve: http://plnkr.co/edit/q59XhTO0II1ZBz21Etj2?p=preview

推荐答案

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

This answer is based on @pkozlowski.opensource comment: add a script tag to your html file like following and then your are good to go:

<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>

我修改了原始模板并用字形替换了分页文本，并在链接中添加了标题以进行自定义.

I modified original template and replaced pagination texts with glyphicons and added title to links for customization.

这篇关于如何在 angular-ui bootstrap 分页指令中将 prevous-text 和 next-text 属性设置为 HTML 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！