diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js index e957d78660bd..2262da4c168e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js @@ -1,5 +1,4 @@ -angular.module("umbraco.directives") - +angular.module('umbraco.directives') /** * @ngdoc directive * @name umbraco.directives.directive:localize @@ -8,12 +7,12 @@ angular.module("umbraco.directives") * @description *
* Component
- * Localize a specific token to put into the HTML as an item + * Localize a specific token to put into the HTML as an item. *
*
* Attribute
- * Add a HTML attribute to an element containing the HTML attribute name you wish to localise - * Using the format of '@section_key' or 'section_key' + * Add an HTML attribute to an element containing the HTML attribute name you wish to localize, + * using the format of '@section_key' or 'section_key'. *
* ##Usage *
@@ -36,12 +35,11 @@ angular.module("umbraco.directives")
                 watchTokens: '@'
             },
             replace: true,
-
             link: function (scope, element, attrs) {
                 var key = scope.key;
-                scope.text = "";
+                scope.text = '';
 
-                // A render function to be able to update tokens as values update.
+                // A render function to be able to update tokens as values update
                 function render() {
                     element.html(localizationService.tokenReplace(scope.text, scope.tokens || null));
                 }
@@ -50,26 +48,28 @@ angular.module("umbraco.directives")
                     scope.text = value;
                     render();
                 });
+
                 if (scope.watchTokens === 'true') {
                     scope.$watch("tokens", render, true);
                 }
             }
         };
     })
-
     .directive('localize', function ($log, localizationService) {
         return {
             restrict: 'A',
             link: function (scope, element, attrs) {
-                //Support one or more attribute properties to update
+                // Support one or more attribute properties to update
                 var keys = attrs.localize.split(',');
 
                 Utilities.forEach(keys, (value, key) => {
                     var attr = element.attr(value);
-
                     if (attr) {
+                        // Localizing is done async, so make sure the key isn't visible
+                        element.removeAttr(value);
+                        
                         if (attr[0] === '@') {
-                            //If the translation key starts with @ then remove it
+                            // If the translation key starts with @ then remove it
                             attr = attr.substring(1);
                         }
 
@@ -82,5 +82,4 @@ angular.module("umbraco.directives")
                 });
             }
         };
-
     });