CODEWITHSUNDEEP
angularjspaginationangular-ui-bootstrap
Maxence
Maxence

Reputation: 13314

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?

Upvotes: 5

Views: 8443

Answers (6)

Pascal Precht
Pascal Precht

Reputation: 8893

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171689

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

Upvotes: 10

wise
wise

Reputation: 49

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>

Upvotes: 1

Anurada Bandara
Anurada Bandara

Reputation: 11

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

Upvotes: 1

hyman zhang
hyman zhang

Reputation: 121

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="»";}]);

Upvotes: 7

GeBeater
GeBeater

Reputation: 173

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.

Upvotes: 3

Related Questions