Translate Angular-UI pagination

问题

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?

回答1:

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

回答2:

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.

回答4:

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');
});

回答5:

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>

回答6:

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

来源：https://stackoverflow.com/questions/19608794/translate-angular-ui-pagination

标签

angularjs

pagination

angular-ui-bootstrap