如何设置prevous文本和下一文本属性为角UI分页引导指令HTML模板 [英] How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

问题描述

我要使用<一个href=\"http://angular-ui.github.io/bootstrap/#pagination\">http://angular-ui.github.io/bootstrap/#pagination
我需要设置'previous'，'下一个'指标为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.

下面是我想要达到plunker：<一href=\"http://plnkr.co/edit/q59XhTO0II1ZBz21Etj2?p=$p$pview\">http://plnkr.co/edit/q59XhTO0II1ZBz21Etj2?p=$p$pview

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

我修改原始模板和 glyphicons 并添加标题可定制​​的链接替换分页文本。

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

这篇关于如何设置prevous文本和下一文本属性为角UI分页引导指令HTML模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！