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

Question

我将使用http://angular-ui.github.io/bootstrap/#pagination 我需要将'previous','next'指标设置为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

我遇到了同样的问题.但不同的是我使用了fontawesome.在这里,您可以找到每个图标的unicode.

请注意,分页现在在标签下 uib-pagination

HTML文件

<uib-pagination class="my-pagination"
                ...
                first-text="&#xf049;"
                previous-text="&#xf048;"
                next-text="&#xf051;"
                last-text="&#xf050;">
</uib-pagination>

CSS文件

.my-pagination {
    font-family: Helvetica, FontAwesome;
}

这里使用Helvetica来设置数字的字体.结果是跟随 图标的angularjs分页

Answer 2

这个答案基于@ 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>

我修改了原始模板并用glyphicons替换了分页文本,并为链接添加了标题以进行自定义.