【问题标题】: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

            【讨论】:

            • 怎么样?您能否举例说明如何通过您的扩展程序实现这一目标?
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2012-06-08
            • 1970-01-01
            • 2013-10-06
            • 1970-01-01
            • 2015-11-04
            • 1970-01-01
            相关资源
            最近更新 更多