How to set prevous-text and next-text attribute as HTML template in angular-ui bootstrap pagination directive

All we need is an easy explanation of the problem, so here it is.

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

something like:

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

Unfortunately it returns parsed html instead of icons.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I faced the same problem. But the difference is that I use fontawesome. Here you can find unicode for every icon.

Please note that the pagination is now under the tag uib-pagination

HTML file

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

CSS file

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

Helvetica is used here to set the font of the numbers.
The result is following
angularjs pagination with icons

Method 2

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.

Method 3

Put this in your controller

    $templateCache.put('template/pagination/pagination.html',
            "<ul class=\"pagination\">\n" +
            "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(1)\"><span class=\"glyphicon glyphicon-fast-backward\"></span></a></li>\n" +
            "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(page - 1)\"><span class=\"glyphicon glyphicon-triangle-left\"></span></a></li>\n" +
            "  <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>\n" +
            "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(page + 1)\"><span class=\"glyphicon glyphicon-triangle-right\"></span></a></li>\n" +
            "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(totalPages)\"><span class=\"glyphicon glyphicon-fast-forward\"></span></a></li>\n" +
            "</ul>");

Method 4

I faced a similar issue in ng-text-truncate. There the problem was that the parameter was being added as a string to the html. SO I was facing the parsing issues. So try correcting the quotes as following :

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply