Correct use for angular-translate in controllers

Question

I m using angular-translate for i18n in an AngularJS application   For every application view  there is a dedicated controller  In the controllers below  I set the value to be shown as the page title   Code  HTML   lt h1 gt    pageTitle    lt  h1 gt    JavaScript   controller  FirstPageCtrl      scope     filter   function   scope   filter             scope pageTitle    filter  translate    HELLO WORLD              controller  SecondPageCtrl      scope     filter   function   scope   filter             scope pageTitle    Second page title             I m loading the translation files using the angular-translate-loader-url extension   Problem  On the initial page load  the translation key is shown instead of the translation for that key  The translation is Hello  World   but I m seeing HELLO WORLD   The second time I go to the page  all is well and the translated version is shown   I assume the issue has to do with the fact that maybe the translation file is not yet loaded when the controller is assigning the value to  scope pageTitle   Remark  When using  lt h1 gt    pageTitle   translate    lt  h1 gt  and  scope pageTitle    HELLO WORLD    the translation works perfect from the first time  The problem with this is that I don t always want to use translations  eg  for the second controller I just want to pass a raw string    Question  Is this a known issue   limitation  How can this be solved

User · Answer

Actually  you should use the translate directive for such stuff instead    lt h1 translate    pageTitle    gt  lt  h1 gt    The directive takes care of asynchronous execution and is also clever enough to unwatch translation ids on the scope if the translation has no dynamic values   However  if there s no way around and you really have to use  translate service in the controller  you should wrap the call in a  translateChangeSuccess event using  rootScope in combination with  translate instant   like this    controller  foo   function   rootScope   scope   translate       rootScope  on   translateChangeSuccess   function           scope pageTitle    translate instant  PAGE TITLE               So why  rootScope and not  scope  The reason for that is  that in angular-translate s events are  emited on  rootScope rather than  broadcasted on  scope because we don t need to broadcast through the entire scope hierarchy   Why  translate instant   and not just async  translate    When  translateChangeSuccess event is fired  it is sure that the needed translation data is there and no asynchronous execution is happening  for example asynchronous loader execution   therefore we can just use  translate instant   which is synchronous and just assumes that translations are available   Since version 2 8 0 there is also  translate onReady    which returns a promise that is resolved as soon as translations are ready  See the changelog

User · Answer

Recommended  don t translate in the controller  translate in your view  I d recommend to keep your controller free from translation logic and translate your strings directly inside your view like this    lt h1 gt     TITLE HELLO WORLD    translate    lt  h1 gt    Using the provided service  Angular Translate provides the  translate service which you can use in your Controllers   An example usage of the  translate service can be    controller  TranslateMe      scope     translate   function   scope   translate         translate  PAGE TITLE            then function  translatedValue                 scope pageTitle   translatedValue                    The translate service also has a method for directly translating strings without the need to handle a promise  using  translate instant      controller  TranslateMe      scope     translate   function   scope   translate         scope pageTitle    translate instant  TITLE DASHBOARD       Assuming TITLE DASHBOARD is defined       The downside with using  translate instant   could be that the language file isn t loaded yet if you are loading it async   Using the provided filter  This is my preferred way since I don t have to handle promises this way  The output of the filter can be directly set to a scope variable    controller  TranslateMe      scope     filter   function   scope   filter        var  translate    filter  translate          scope pageTitle    translate  TITLE DASHBOARD       Assuming TITLE DASHBOARD is defined       Using the provided directive  Since  PascalPrecht is the creator of this awesome library  I d recommend going with his advise  see his answer below  and use the provided directive which seems to handle translations very intelligent      The directive takes care of asynchronous execution and is also clever enough to unwatch translation ids on the scope if the translation has no dynamic values

User · Answer

EDIT  Please see the answer from PascalPrecht  the author of angular-translate  for a better solution     The asynchronous nature of the loading causes the problem  You see  with    pageTitle   translate     Angular will watch the expression  when the localization data is loaded  the value of the expression changes and the screen is updated   So  you can do that yourself    controller  FirstPageCtrl      scope     filter   function   scope   filter         scope  watch          function     return  filter  translate    HELLO WORLD               function newval     scope pageTitle   newval                 However  this will run the watched expression on every digest cycle  This is suboptimal and may or may not cause a visible performance degradation  Anyway it is what Angular does  so it cant be that bad

User · Answer

To make a translation in the controller you could use  translate service    translate   COMMON SI    COMMON NO    then function  translations        vm si   translations  COMMON SI        vm no   translations  COMMON NO          That statement only does the translation on controller activation but it doesn t detect the runtime change in language  In order to achieve that behavior  you could listen the  rootScope event   translateChangeSuccess and do the same translation there        rootScope  on   translateChangeSuccess   function               translate   COMMON SI    COMMON NO    then function  translations                vm si   translations  COMMON SI                vm no   translations  COMMON NO                          Of course  you could encapsulate the  translateservice in a method and call it in the controller and in the  translateChangeSucesslistener

User · Answer

What is happening is that Angular-translate is watching the expression with an event-based system  and just as in any other case of binding or two-way binding  an event is fired when the data is retrieved  and the value changed  which obviously doesn t work for translation   Translation data  unlike other dynamic data on the page  must  of course  show up immediately to the user   It can t pop in after the page loads     Even if you can successfully debug this issue  the bigger problem is that the development work involved is huge   A developer has to manually extract every string on the site  put it in a  json file  manually reference it by string code  ie  pageTitle  in this case    Most commercial sites have thousands of strings for which this needs to happen   And that is just the beginning   You now need a system of keeping the translations in synch when the underlying text changes in some of them  a system for sending the translation files out to the various translators  of reintegrating them into the build  of redeploying the site so the translators can see their changes in context  and on and on     Also  as this is a  binding   event-based system  an event is being fired for every single string on the page  which not only is a slower way to transform the page but can slow down all the actions on the page  if you start adding large numbers of events to it     Anyway  using a post-processing translation platform makes more sense to me   Using GlobalizeIt for example  a translator can just go to a page on the site and start editing the text directly on the page for their language  and that s it   https   www globalizeit com HowItWorks    No programming needed  though it can be programmatically extensible   it integrates easily with Angular   https   www globalizeit com Translate Angular  the transformation of the page happens in one go  and it always displays the translated text with the initial render of the page   Full disclosure   I m a co-founder

[javascript] Correct use for angular-translate in controllers

Examples related to javascript

Examples related to angularjs

Examples related to angular-translate