PaginationConfig should evaluate its attributes

[frapontillo]

I am using the pagination directive with angular-translate and I am having some issues trying to globally localize the pagination directive. I am using the following code in app.run:

paginationConfig.previousText = $translate('BACK');
paginationConfig.nextText = $translate('NEXT');
paginationConfig.firstText = $translate('FIRST');
paginationConfig.lastText = $translate('LAST');

But that doesn't work, as the shown values are simply BACK, NEXT, FIRST, LAST. Is there a way to forcefully evaluate those properties when they change?

Thanks.

[hallister]

That's an angular-translate issue. You haven't setup the translation definitions for BACK, NEXT, etc. If you think this is still a Bootstrap UI issue, feel free to respond with a minimal reproducible plunker of the problem.

[frapontillo]

I have set up a plnkr that reproduces the problem: http://plnkr.co/edit/LgEI9Y?p=preview
As you can see, changing the language triggers the evaluation on the $scope, but the pagination directive does not seem to $watch it.

[bekos]

@frapontillo Indeed, pagination and no other directive $watches the configuration objects for changes.
Probably we should expose a method in the controller to reevaluate from your directive.

[hallister]

Going to reopen this since it is a Bootstrap UI issue.

[frapontillo]

Also, it looks like pagination does not properly re-evaluate its attributes. I have used the plain old double bracket in this plnkr, yet the text doesn't change.

[bekos]

@frapontillo This has come up earlier once or twice and the answer was that changing these labels in runtime seemed like an edge case and we don't want penalize the performance of common use cases with some extra $watches. A workaround is to somehow destroy and recreate your pagination control.

Also there was an ugly bug in Angular that was just solved, that trying to update these attributes, as you suggest, would result in a lot added ugly code in our directive :-)
So I would wait to tackle this issue when the fix is on a stable version that this project supports.

For now and this issue, I would like to add the ability to re-evaluate the config object :-)

[frapontillo]

Thank you for the detailed answer @bekos!
Let me get this correctly: if the template is in a partial view loaded with templateUrl its attributes aren't properly evaluated and/or bound?
Aside from paginationConfig, is it possible to use something like <pagination previous-text="{{'BACK'|translate}}"></pagination> as shown in my previous plunker?

[bekos]

@frapontillo If the directive is using templateUrl and replace: true then the attrs.$observe method is broken in two ways. The first is that you don't get the interpolated value inside the observe function, but this can be fixed by adding a @ binding in the scope. The other broken part is that even if you are able to get the evaluated value, the $observe does not fire when a change happens. The solution to the second is to use a scope.$watch instead.
For me, these seem enough, to wait for angular to solve it's own bug :-) But this will happen only in 1.2

I don't quite get the second question. Of course you can use this and you do use this as I can see. That's why BACK (uppercase) turns to back, but probably this is not what you ask :-)

[frapontillo]

Yes, but if you try and change the language (http://plnkr.co/edit/vVfX8J?p=preview), the expression is not re-evaluated (it does not turn into indietro). but the span of course does.

[bekos]

Attributes are not "observed" right now, because of the previous comment.

[frapontillo]

Got it, I didn't get it was referred to attributes as well as paginationConfig. I will wait for 1.2.0 to become stable then.
Thanks!

[arey]

Hi,
I have the same requirements than @frapontillo. I'd like to change dynamically the previous/next/first/last button labels. And it does not work with Angular JS 1.2.6 and Angular Bootrsrap 0.9.0
Is there a workaround? Is there a way to "refresh" the pagination directive on JavaScript side?
Thanks for your help

[alex6o]

+1 for this request

[bekos]

After bce2505 has landed, both config and render are part of the PaginationController, so another directive can easily hook and handle situations like this. If still an issue feel free to reopen.

[Brunof89]

Hello , what was the solution to this problem ? i also had the same problem.

[germanger]

+1

I want to dynamically translate the pagination labels too!

Tried this but, as said, attributes are not re-evaluated.

angular.module('myApp').run(['paginationConfig', '$filter', function(paginationConfig, $filter) {
   paginationConfig.firstText = $filter('translate')('First');
   paginationConfig.lastText = $filter('translate')('Last');
   paginationConfig.previousText = $filter('translate')('Previous');
   paginationConfig.nextText = $filter('translate')('Next');
}]);

[realityking]

@germanger The filter will be executed once when called and the result will be assigned to paginationConfig. (This is how Javascript works and not related to UI Bootstrap or AngularJS)

What you should do instead, is listen to $translateChangeSuccess on the root scope and then reassign the values to paginationConfig.

[anuradhabandara]

@realityking Thanks...Its done the job.

var $translate = $filter('translate');
$rootScope.$on('$translateChangeSuccess' , function(){
paginationConfig.firstText = $translate('First');
paginationConfig.lastText = $translate('Last');
paginationConfig.previousText = $translate('Previous');
paginationConfig.nextText = $translate('Next');
});

[emfrigo]

I'm really new to AngularJS but i have the same issue, someone can please make an example how you can use this solution??
Thanks

[railsstudent]

@bandara00007 try your code but it is not working for me. Do you have sample code?

[JeanPerriault]

@bandara00007 @railsstudent listenning at $translateChangeSuccess didn't work for me neither, I ended up using templateUrl, cloning current template in templateCache and replacing getText call with {{ 'label_first' | translate }}