Merge branch 'v8/contrib' of https://github.com/umbraco/Umbraco-CMS into v8/contrib

Author: nul800sebastiaan

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
     * <div>
     *   <strong>Component</strong><br />
-    *   Localize a specific token to put into the HTML as an item
+    *   Localize a specific token to put into the HTML as an item.
     * </div>
     * <div>
     *   <strong>Attribute</strong><br />
-    *   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'.
     * </div>
     * ##Usage
     * <pre>
@@ -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")
                 });
             }
         };
-
     });