Strings translated by gettextCatalog in controller are not shown translated after language switch

[burakkilic]

Hello;

I'm using bootstrap tabs in my view.

$scope.tabData = [{ heading: gettextCatalog.getString("General"), route: 'shops.detail.general' }, { heading: gettextCatalog.getString('Credentials'), route: 'shops.detail.credentials' }];

Page opens normally with true translation. But if I switch to another language, tab headings are not translated until I make refresh

How can I fix that?

[wingedfox]

Listen to 'gettextLanguageChanged' event and update translations manually or use 'translate' directive in templates.

[spirau]

This issue is encoutered with any use of getString. So what's the point of providing this method if it's not updated correctly. If I need to put translation in a service and not in a template, there should be a way to update the translation automatically, not by hand!

[mattbrunetti]

@burakkilic

$scope.tabData = function () {
  [{
    heading: gettextCatalog.getString("General"),
    route: 'shops.detail.general'
  }, {
    heading: gettextCatalog.getString('Credentials'),
    route: 'shops.detail.credentials'
  }];
};

And in your template change tabData to tabData().

[mattbrunetti]

@spirau Like with my example, instead of saving the result of getString at a certain point in time, save a function that will always get the string in the current language.

e.g. Instead of this...

var message = gettextCatalog.getString('Hello world');
...
setTimeout(function () {
  alert(message);
}, 5000);

do this...

var getMessage = function () {
  gettextCatalog.getString('Hello world');
};
...
setTimeout(function () {
  alert(getMessage());
}, 5000);

It adds a bit of complexity, but it gets the job done.