Umbraco 12.2.0 - Translation with AngularJS
# help-with-umbraco
d
Hello ! I have a problem with the "localizationService", it returns me the full key instead of the translation. This is for a custom component that reports the number of characters written and displays warnings. I searched on the internet and in particular on the forums, I have the same translation code. Or maybe I'm blind ;/ and I missed a detail. My JS controller:
Copy code
angular.module("umbraco").controller("TextStringControl.Controller", [
    "$scope",
    "localizationService",
    function ($scope, localizationService) {

        var vm = this;

        function init() {

            $scope.translatedText = "";
            localizationService.localize("Front.ContactEmail.City")
                .then(function (translatedText) {
                    $scope.translatedText = translatedText;
                });

            $scope.model.value = $scope.model.value;

            vm.uniqueId = $scope.model.hasOwnProperty("dataTypeKey")
                ? [$scope.model.alias, $scope.model.dataTypeKey.substring(0, 8)].join("-")
                : $scope.model.alias;
        }

        init();
    }
]);
My component:
Copy code
<div ng-controller="TextStringControl.Controller" ng-if="!preview">
   <div class="form-group">
      <input
         type="text"
         class="umb-property-editor umb-textstring textstring ng-valid ng-isolate-scope ng-valid-val-server ng-valid-required tsc-input ng-not-empty ng-dirty ng-valid-parse ng-touched"
         ng-model="model.value"
         val-server="value">

      <span class="tsc-note">
         <strong 
            ng-class="{
               'tsc-success': model.value.length >= model.config.minRecommendedValue && model.value.length <= model.config.maxRecommendedValue,
               'tsc-warning': model.value.length > 0 && model.value.length < model.config.minRecommendedValue,
               'tsc-error': model.value.length && model.value.length > model.config.maxRecommendedValue
            }"
            class="tsc-warning">

            <i ng-class="{
               'icon icon-checkbox before': model.value.length >= model.config.minRecommendedValue && model.value.length <= model.config.maxRecommendedValue,
               'icon icon-alert-alt before': model.value.length > 0 && model.value.length < model.config.minRecommendedValue,
               'icon icon-wrong before': model.value.length && model.value.length > model.config.maxRecommendedValue
            }"
            class="icon icon-alert-alt before">
            </i>{{ model.value.length }} characters
         </strong>
         <em>— {{ translatedText }} recommended {{ model.config.minRecommendedValue }} to {{ model.config.maxRecommendedValue }}</em>
      </span>
  </div>
</div>
and my variable {{ translatedText }} returns me: [general_Front.ContactEmail.City] Which seems to me to be the full path, it's weird. Thank you in advance for your help !
k
Hi, The localization service isn't reading the values from the dictionary, it reads them from the Lang XML files 😦
so for a package they live in
App_Plugins/Package/Lang/en-us.xml
etc
if you do want them from the dictionary, you need to use the dictionaryResource - see https://apidocs.umbraco.com/v12/ui/#/api/umbraco.resources.dictionaryResource
but i am not sure that's reallu optimized for this, its more for the code in the back office reading the values.
d
Thanks! I used dictionaryResource and it works
3 Views