CODEWITHSUNDEEP
javascriptangularjspaginationangular-translate
Sadiksha Gautam
Sadiksha Gautam

Reputation: 5152

Angular Translation is not available for pagination buttons

I am using angular-translate and partial loader to load my translations. The normal text translation works just fine, however the translation is not visible on the pagination buttons. I have a minimum working demo https://plnkr.co/edit/vNT0nQvBAKZb8RnFpjkE?p=preview.

The pagination directive looks like:

  <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>

Can anyone please have a look if I am missing any configuration?

Thank you.

Upvotes: 1

Views: 567

Answers (2)

Samir
Samir

Reputation: 691

I have got some tweaks to make your pagination text change on translation. Actually I did nothing on $translate lib, I played along uib pagination DOM manipulation.

Also for the first time to set text it needs a delay.

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

Changed function:

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);
    }
  }

I have not refactored the code. In case you think the better option please feel free to opt for it.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222682

You can do it in controller by creating a $scope variable,

  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

Upvotes: 0

Related Questions