Question

如何在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

您可以在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

设置可以作为@Test中的属性提供，也可以通过uibPaginationConfig进行全局配置。

例如：

<uib-pagination>

Answer 3

我正在使用ui.bootstrap.pagination和angular-translate模块（感谢@PascalPrecht这个伟大的库）。但是，阻止动态更新的一个问题是默认模板“template / pagination / pagination.html”中使用的One-time binding expression。所以我使用了pagination directive的'template-url'属性来使用修改后的分页模板而没有一次性绑定。

Answer 4

您可以使用angular-translate的组件来实现此目的。 https://github.com/angular-translate/angular-translate

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>

翻译Angular-UI分页

6 个答案: