angularjs: gettext not working in ngSwitch

Question

I'm trying to use gettext in combination with ngSwithc, as follows:

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1" translate>...</ANY>
  <ANY ng-switch-when="matchValue2" translate>...</ANY>
  <ANY ng-switch-default translate>...</ANY>
</ANY>

Here is a jsfiddle demonstrating the issue. The error I get is

Error: [$compile:multidir] Multiple directives [ngSwitchWhen, translate] asking for transclusion on: <div ng-switch-when="opt0" translate="">

Any suggestion how I can use gettext in combination with ngSwitch ?

Answer 1

Simple fix is move translate attribute to another tag inside the switch tags

Answer 2

I've solved this in slightly a different manner making use of a translate service and such.

<div>
    <select class="form-control" id="selectLocale" ng-model="selectedLocale"
        ng-options="locale as translate(locale.name) for locale in locales">
    </select>
</div>

This enabled me to add a function on the $scope to get the translated string by calling

$scope.translate = function(str) {
    return LanguageService.getTranslatedString(str);
};

Now every time the select iterates through the array it will call this function to translate the string for you. For more information on the select tag, check out a AngularJS: API: select directive in the documentation.

Please visit my blog entry a Angular-GetText Snippets for more in depth information.