Перевести Angular-UI pagination

Question

Как я могу перевести текст в директиве pagination Bootstrap UI?

Я перекрытая константы, как это для французского перевода:

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

Но первостепенных констант, кажется, плохая идея ...

Что такое правильный способ (если таковые имеются), чтобы сделать это?

Answer 1

Вместо overiding весь постоянный объект, который вы можете изменить его свойства в run метода

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

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

}) 

DEMO

В новой версии ui.bootstrap вы должны использовать

uibPaginationConfig 

insted of

paginationConfig 

Answer 2

Для достижения этой цели вы можете использовать компоненты углового транслятора. https://github.com/angular-translate/angular-translate

Answer 3

Я использую ui.bootstrap.pagination вместе с модулем углового перевода (спасибо @PascalPrecht за эту замечательную библиотеку). Однако одной из проблем, которая препятствует динамическому обновлению, является использование One-time binding expression в шаблоне по умолчанию «template/pagination/pagination.html». Поэтому я использовал атрибут «шаблон-url» для pagination directive, чтобы использовать модифицированный шаблон для разбивки на страницы без одноразовой привязки.

Answer 4

Настройки могут быть предоставлены в качестве атрибутов в <uib-pagination> или глобально настроены через uibPaginationConfig.

Например:

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

Answer 5

Просто используйте

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

Answer 6

если вы смотрите внутри директивы вы можете увидеть параметры директивы:

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

Таким образом, вы можете пройти параметр директивы как ниже:

<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>