AngularJS - how to trigger filter on ng-click

Question

I'm trying to make simple multi-language website. I have a small controller just to be able to change current language in root scope:

 app.controller('Ctrl', function($scope, $rootScope) { $rootScope.currentLang = 'en_US'; $scope.switchLang = function(){ if($rootScope.currentLang ==='en_US'){ $rootScope.currentLang = 'cs_CS'; } else { $rootScope.currentLang = 'en_US'; } } });

And I want to store my data in filter:

 app.filter('ci18n', function($rootScope){ return function(id_text){ var translations = { 'en_US' : { 'GREETING' : 'Hi' }, 'cs_CS' : { 'GREETING' : 'Cau' } }; return translations[$rootScope.currentLang][id_text]; }; });

Problem is that my website does't change with rootScope change. I need an idea how to solve it better or how to trigger filter again to change my texts.

Here is how I use the filter

<p>greet: {{'GREETING' | ci18n}}</p>

I tried that inside of switchLang() function with no change. — Jan Omacka
– Jan Omacka, Commented Jun 26, 2015 at 13:13

Thomas · Accepted Answer · 2015-06-26 13:20:04Z

Starting from Angular 1.3, filters are assumed to be stateless in order to speed things up in the common case. That means Anguar won't re-evaluate your filter if its input has not changed. Angular has no idea that you're also reading $rootScope.currentLang within the filter implementation, so it doesn't know that the filter needs to be re-evaluated if currentLang changes.

The solution is to mark your filter as stateful explicitly:

 app.filter('ci18n', function($rootScope){ var filter = function(id_text){ var translations = { 'en_US' : { 'GREETING' : 'Hi' }, 'cs_CS' : { 'GREETING' : 'Cau' } }; return translations[$rootScope.currentLang][id_text]; }; filter.$stateful = true; // <-- the magic line return filter; });

Of course this does come with a performance penalty, but since your filter is just a map lookup, that shouldn't have much of an impact.

@JanOmacka just a suggestion. Do accept the answer if it solves/addresses your issue(s)!
Upgraded angular from 1.2 to 1.4 and lost the ability to change locale dynamically for some of my custom filters, $stateful really is the magic line here! Thanks

Collectives™ on Stack Overflow

AngularJS - how to trigger filter on ng-click

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related