5

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

但是覆盖常量似乎是一个坏主意......

执行此操作的正确方法（如果有）是什么？

4

6 回答 6

10

run您可以在方法中修改它的属性，而不是覆盖整个常量对象

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

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

})

DEMO

在新版本中ui.bootstrap你应该使用

uibPaginationConfig

安装的

paginationConfig
于 2013-10-26T16:22:28.473 回答
7

设置可以作为属性提供，也可以<uib-pagination>通过 uibPaginationConfig 全局配置。

例如：

angular.module('app',['ui.bootstrap']).config(['uibPaginationConfig',
                                           function(uibPaginationConfig){
uibPaginationConfig.previousText="‹";
uibPaginationConfig.nextText="›";
uibPaginationConfig.firstText="«";
uibPaginationConfig.lastText="»";}]);
于 2015-11-02T05:54:47.843 回答
3

我将 ui.bootstrap.pagination 与 angular-translate 模块一起使用（感谢@PascalPrecht提供了这个很棒的库）。然而，阻止动态更新的一个问题是默认模板“template/pagination/pagination.html”中使用的一次性绑定表达式。所以我使用分页指令的'template-url'属性来使用修改后的分页模板，无需一次性绑定。

于 2015-10-11T08:44:00.873 回答
1

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

于 2013-11-03T10:49:57.300 回答
1

如果您查看指令内部，您可以看到指令参数：

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>
于 2016-04-12T14:29:19.377 回答
1

只需使用 

$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');
});
于 2016-02-29T05:54:27.857 回答