Uib-paginator - one-time binding

Question

Introduction

Now I'm using uib-paginator in my Angular 1.6 app. I want to be able to change some bindings after the application has started. E.g. in this case I want to change the language at any time.

It looks like some uib-paginator directive bindings use one-time binding. So I can only affect them once.

Usage

<ul uib-pagination total-items="3"
    ng-model="currentPage"
    class="Pagination"
    boundary-links="true"
    num-pages="numPages"
    items-per-page="itemsPerPage"
    first-text="{{'LABEL_FIRST' | translate}}"
    next-text="{{'LABEL_NEXT' | translate}}"
    previous-text="{{'LABEL_PREV' | translate}}"
    last-text="{{'LABEL_LAST'}} | translate"></ul>

• These bindings use one-time binding:
  • first-text
  • next-text
  • previous-text
  • last-text

When I change the language, the values of LABEL_* variables will change. But obviously it doesn't affect the paginator.

Thoughts

I could probably write jQuery code to refresh that particular element when any of these LABEL_* variables changes. But I want to keep jQuery away from this application as much as I can.

If you have any idea of how I can solve this problem (without jQuery..:) then please share it.

Answer 1

Here is the solution for anyone who has the same problem:

1.
This is the uib-paginator template:
https://github.com/angular-ui/bootstrap/blob/master/template/pagination/pagination.html

Copy it to a .html file.

2.
Modify all

{{::getText('x')}} to {{getText('x')}}

Or replace it with your own translation (like I did)

{{::getText('first')}} to {{'LABEL_FIRST'|translate}}

3.
Use the attribute template-url in the uib-pagination and reference to the new template.

The new example of my code above will look like this:

<ul uib-pagination total-items="3"
ng-model="currentPage"
class="Pagination"
boundary-links="true"
num-pages="numPages"
items-per-page="itemsPerPage"
template-url="../templates/myNewPaginatorTemplate.html"></ul>

Voilà.