Angular 翻译不适用于分页按钮

Question

我正在使用 angular-translate 和部分加载程序来加载我的翻译。正常的文本翻译工作得很好，但是翻译在分页按钮上不可见。我有一个最低工作演示 https://plnkr.co/edit/vNT0nQvBAKZb8RnFpjkE?p=preview。

分页指令如下所示：

  <ul uib-pagination ng-model="currentPage" 
                  total-items="rows.length" 
                  max-size="maxSize" 
                  boundary-links="true" 
                  first-text="{{'FIRST_TEXT'|translate}}" 
                  previous-text="{{'PREVIOUS_TEXT'|translate}}" 
                  next-text="{{'NEXT_TEXT'|translate}}" 
                  last-text="{{'LAST_TEXT'|translate}}">
  </ul>

如果我缺少任何配置，谁能帮我看看？

谢谢。

Answer 1

您可以在控制器中创建一个 $scope 变量，

  function ProfessionalController($scope, $rootScope, $translate) {
    $scope.filteredRows = [];
    $scope.currentPage = 1;
    $scope.numPerPage = 10;
    $scope.maxSize = 5;
    $scope.previousText;
    $scope.nextText;

    $translate(['PREVIOUS', 'NEXT']).then(function(translations) {
      $scope.previousText = translations.PREVIOUS;
      $scope.nextText = translations.NEXT;
    });
  }

HTML:

  <ul uib-pagination ng-model="currentPage" 
                      total-items="rows.length" 
                      max-size="maxSize" 
                      boundary-links="true" 
                      first-text="{{'FIRST_TEXT'|translate}}" 
                      previous-text="{{previousText}}" 
                      next-text="{{nextText}}" 
                      last-text="{{'LAST_TEXT'|translate}}">
      </ul>

DEMO

Answer 2

我进行了一些调整，使您的分页文本在翻译时发生变化。实际上我在 $translate lib 上什么也没做，我玩了 uib 分页 DOM 操作。

也是第一次设置文字需要延迟

plnkr : https://plnkr.co/edit/sZ5J2qaqDOLcg76MgicM?p=preview

更改的功能：

function NavigationController($scope,$rootScope, $translate, $timeout) {
    $rootScope.refreshPagination = true;
    $timeout(function() {
      $translate.use($translate.use()).then(function(){
        refreshPaginationItems();
      });
    }, 1000);
    $scope.changeLanguage = function (langkey) {
      $translate.use(langkey).then(function(){
        refreshPaginationItems();
      });
    }

    function refreshPaginationItems(){
      $rootScope.refreshPagination = false;
      $timeout(function() {
        $rootScope.refreshPagination = true;
      }, 0);
    }
  }

我没有重构代码。如果您认为更好的选择，请随时选择它。

Angular 翻译不适用于分页按钮

Angular Translation is not available for pagination buttons

javascript

angularjs

pagination

angular-translate