翻译 Angular-UI 分页答案

【问题标题】：Translate Angular-UI pagination翻译 Angular-UI 分页
【发布时间】：2013-10-26 16:02:38
【问题描述】：

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

但是重写常量似乎是个坏主意...

这样做的正确方法是什么（如果有的话）？

【问题讨论】：

标签： angularjs pagination angular-ui-bootstrap

【解决方案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

插入

paginationConfig

【讨论】：

好的，谢谢。我在问问题之前尝试了 app.run，但我忘了像白痴一样注入 paginationConfig。
别难过...我通过这样做学到了一些东西...沿角度学习曲线有很多障碍
嗨 Charlietfl，我面临同样的问题。使用您的解决方案，我可以翻译分页文本。但是，如果我的语言选择是动态的，那么在这种情况下如何使用 translate 指令呢？
@dip 建议您在找不到类似问题时创建一个新问题

【解决方案2】：

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

例如：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

随便用

$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】：

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

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>

【讨论】：

【解决方案6】：

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

【讨论】：

怎么样？您能否举例说明如何通过您的扩展程序实现这一目标？