Refreshing translations using angular-translate

Question

I'm using angular translate for i18n.

The particular feature I'm working on is updating the status of a book. In the service callback, if successful, I am updating my book status from, say, Open to Closed. If I view the scope (using Batarang), I can see my DOM element as such:

<span translate="Closed" class="ng-scope">Open</span>

As you can see, the translate value is being updated, but the translation itself isn't occurring on its own. I've read the docs and understand this is expected behavior. What I want to know, though, is how should I be refreshing the translated value?

Presently, I'm injecting the $translate service and executing $translate.refresh() every time I update a scope value that needs to be re-translated. I feel like that's clunky, and probably not the way I should be doing it.

Any thoughts?

Answer 1

You definitely should not issue a refresh for this.

just do something like this:

<span> {book.state | translate} </span> 

Given that your book model has a member state to reflect it's state. Whenever the model changes, the value of state will be re-translated.

Answer 2

Create a common service for translation, this will configure our translation code, in particular it will configure the location of our translation files. Create a directory src/common/translation, and a file src/common/translation/translation.js: http://technpol.wordpress.com/2013/11/02/adding-translation-using-angular-translate-to-an-angularjs-app/

angular.module('angularTranslateApp', ['pascalprecht.translate'])
  .config(function($translateProvider, $translatePartialLoaderProvider) {
    $translateProvider.useLoader('$translatePartialLoader', {
      urlTemplate: '/UI/assets/translation/{lang}/{part}.json'
    }
  });

$translateProvider.preferredLanguage('en-AU'); });