Correct use for angular-translate in controllers

by

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:

<h1>{{ 'TITLE.HELLO_WORLD' | translate }}</h1>

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.

More Related Contents:

  1. Share data between AngularJS controllers
  2. Delete firebase data older than 2 hours
  3. How to pass parameters using ui-sref in ui-router to controller
  4. AngularJS – Any way for $http.post to send request parameters instead of JSON?
  5. How to improve performance of ngRepeat over a huge dataset (angular.js)?
  6. Maintain model of scope when changing between views in AngularJS
  7. Break promise chain and call a function based on the step in the chain where it is broken (rejected)
  8. use $http inside custom provider in app config, angular.js
  9. What is the difference between & vs @ and = in angularJS
  10. AngularJS toggle class using ng-class
  11. How do I get the Back Button to work with an AngularJS ui-router state machine?
  12. Export to xls using angularjs
  13. Issue with Android Hybid app to display remote image with Ionic framework?
  14. call function inside $sce.trustAsHtml() string in Angular js
  15. How to read response headers in angularjs?
  16. AngularJS dynamic form field validation
  17. angularJS display base64 image
  18. CSS: Change parent on focus of child
  19. Angular Js currency, symbol euro after
  20. ScrollTo function in AngularJS
  21. Angular/UI-Router – How Can I Update The URL Without Refreshing Everything?
  22. How to delete ‘#’ sign in angular-ui-router URLs
  23. AngularJS ng-repeat handle empty list case
  24. ESLint’s “no-undef” rule is calling my use of Underscore an undefined variable
  25. Retain scroll position on route change in AngularJS?
  26. Setting application wide HTTP headers in AngularJS
  27. angularjs custom filter to check for values inside a data array
  28. In what JS engines, specifically, are toLowerCase & toUpperCase locale-sensitive?
  29. AngularJS application file structure
  30. AngularJS event on window innerWidth size change

Leave a Comment