5

How can I translate text in Bootstrap UI pagination directive?

I've overrided the constants like this for french translation:

angular.module('myapp', ['ui.bootstrap'])
    .constant('paginationConfig', {
        itemsPerPage: 10,
        boundaryLinks: false,
        directionLinks: true,
        firstText: 'Premier',
        previousText: 'Précédent',
        nextText: 'Suivant',
        lastText: 'Dernier',
        rotate: true
    })

But overriding constants seems to be a bad idea...

What is the correct way (if any) to do this?

6 Answers 6

10

Rather than overiding the whole constant object you can modify properties of it within the run method

var app=angular.module('myapp', ['ui.bootstrap']);

app.run(function(paginationConfig){
   paginationConfig.firstText='MY FIRST';
   paginationConfig.previousText='YOUR TEXT';

})

DEMO

In new version of ui.bootstrap you should use

uibPaginationConfig

insted of

paginationConfig
4
  • 1
    Ok, thanks. I tried app.run before asking the question, but I forgot to inject paginationConfig like an idiot.
    – Maxence
    Oct 27, 2013 at 15:35
  • don't feel bad... I learned something to by doing this...plenty of hurdles along the angular learning curve
    – charlietfl
    Oct 27, 2013 at 15:37
  • Hi Charlietfl, I am facing same issue. With your solution I am able to translate pagination text. But what if my language selection is dynamic so how can I use translate directive in such scenario?
    – dip
    Jul 7, 2014 at 10:09
  • @dip suggest you create a new question if you don't find similar one
    – charlietfl
    Jul 7, 2014 at 11:32
7

Settings can be provided as attributes in the <uib-pagination> or globally configured through the uibPaginationConfig.

For example:

angular.module('app',['ui.bootstrap']).config(['uibPaginationConfig',
                                           function(uibPaginationConfig){
uibPaginationConfig.previousText="‹";
uibPaginationConfig.nextText="›";
uibPaginationConfig.firstText="«";
uibPaginationConfig.lastText="»";}]);
3

I am using the ui.bootstrap.pagination together with the angular-translate module (thanks to @PascalPrecht for this great library). However one issue which prevents the dynamic update is the used One-time binding expression in the default template 'template/pagination/pagination.html'. So I used the 'template-url' attribute of the pagination directive to use a modified pagination template without one-time binding.

1

Just use

$translateChangeSuccess event on $rootScope.

var $translate = $filter('translate');

$rootScope.$on('$translateChangeSuccess' , function(){
    paginationConfig.firstText = $translate('First');
    paginationConfig.lastText = $translate('Last');
    paginationConfig.previousText = $translate('Previous');
    paginationConfig.nextText = $translate('Next');
});
1

if you look inside directive you can see directive parameters :

scope: {
  totalItems: '=',
  firstText: '@',
  previousText: '@',
  nextText: '@',
  lastText: '@',
  ngDisabled:'='
}

So you can pass directive parameter like below:

<pagination ng-if="logs" max-size="10"
    force-ellipses="true"
    boundary-links="true"
    first-text="{{translated-word}}"
    last-text="{{translated-word}}"
    next-text="{{translated-word}}"
    previous-text="{{translated-word}}"
    class="pagination-sm">
</pagination>
1

You could use angular-translate's components to achieve this. https://github.com/angular-translate/angular-translate

1
  • 2
    How? Could you give an example of how one can achieve this with your extension?
    – ddsultan
    Aug 23, 2015 at 7:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.