labels not updating after changing language

[fikkatra]

I ran into an issue when changing the language dynamically, using '$i18next.options.lng' in a controller. The labels are not updated automatically to the new language. I see the i18n cookie changing to the new language, so the language change has been executed correctly. However, the labels are only updated when I navigate away from the screen and back (this is client side routing with angular routing and does not trigger a page reload). This last observation made me believe a digest cycle was missing after the language change, but manually triggering a digest showed that a digest was in fact already happening. Any idea why the labels aren't updated immediately?

Lib versions: Ionic 1.0.0 with angular 1.3.13 i18next 1.10.1 ng-i18next 0.5.0, but I tested with various previous versions, to no avail

Config:

    $i18nextProvider.options = {
        useCookie: true,
        fallbackLng: 'nl-BE',
        ns: 'translations',
        resGetPath: 'locales/__ns__.__lng__.json',
        getAsync: false
    };

Controller code (triggered on selecting a language from a dropdown):

$scope.changeLanguage = function (lngCode) {
    $i18next.options.lng = lngCode;
}

Any help would be much appreciated!

bugwelle commented 9 years ago

Well, I can't really tell. Could you post some more code, please? :) Do you use the directive or filter?

Regards, Andre

fikkatra commented 9 years ago

Hi Andre,

we use our own, custom built filter which wraps the ng-18next filter. We do this to encapsulate any external code, so we can easily switch libraries without affecting the entire appliction.

As it turns out, the issue only occurs when we use our own filter. When we use the built-in ng-i18next filter directly, labels are updated immediately. Upon closer inspection, the code within our custom built filter isn't even executed. The problem seems to be that angular does not re-execute the filter because its input has not changed: the input is a static string, the translation key, and aparently nowadays angular is 'smart' enough not to re-evaluate the filter. Of course, the language cookie has changed so the filter needs to be re-rendered, regardless of its input.

I know this is more of an angular issue and the problem does not lie with ng-18next, but do you have any idea how to get around this? Is there a way to force angular to re-execute a filter? You probably ran into the same issue while writing ng-i18next :-)

Thanks! Sophie

bugwelle commented 9 years ago

Sounds like your filter isn't stateful.

Have a look at this article: http://blog.thoughtram.io/angularjs/2014/11/19/exploring-angular-1.3-stateful-filters.html We had a similar issue: https://github.com/i18next/ng-i18next/pull/66

Is your filter stateful? :) Maybe this helps.

Regards, Andre

fikkatra commented 9 years ago

Thank you! That was exactly the issue. I didn't know about stateless filters, looks like I should brush up on my Angular... Thanks for the link!

bugwelle commented 9 years ago

Well, I didn't know about this, too... But thanks to the community we were able to fix this. :)

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[bugwelle]

Well, I can't really tell. Could you post some more code, please? :) Do you use the directive or filter?

Regards, Andre

[fikkatra]

Hi Andre,

we use our own, custom built filter which wraps the ng-18next filter. We do this to encapsulate any external code, so we can easily switch libraries without affecting the entire appliction.

As it turns out, the issue only occurs when we use our own filter. When we use the built-in ng-i18next filter directly, labels are updated immediately. Upon closer inspection, the code within our custom built filter isn't even executed. The problem seems to be that angular does not re-execute the filter because its input has not changed: the input is a static string, the translation key, and aparently nowadays angular is 'smart' enough not to re-evaluate the filter. Of course, the language cookie has changed so the filter needs to be re-rendered, regardless of its input.

I know this is more of an angular issue and the problem does not lie with ng-18next, but do you have any idea how to get around this? Is there a way to force angular to re-execute a filter? You probably ran into the same issue while writing ng-i18next :-)

Thanks! Sophie

[bugwelle]

Sounds like your filter isn't stateful.

Have a look at this article: http://blog.thoughtram.io/angularjs/2014/11/19/exploring-angular-1.3-stateful-filters.html We had a similar issue: https://github.com/i18next/ng-i18next/pull/66

Is your filter stateful? :) Maybe this helps.

Regards, Andre

[fikkatra]

Thank you! That was exactly the issue. I didn't know about stateless filters, looks like I should brush up on my Angular... Thanks for the link!

[bugwelle]

Well, I didn't know about this, too... But thanks to the community we were able to fix this. :)