feat(directive): introduce attr translate-keep-content

The new attribute `translate-keep-content` will not replacing the innerText/innerHTML unless a valid translation has been resolved. fix(service): fix a bug being in the fallback stack that never rejected fallback promises
angular-translate · Mar 6, 2016 · b2cf8a3 · b2cf8a3
1 parent dfa3fcf
commit b2cf8a3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 8 deletions.
diff --git a/src/directive/translate.js b/src/directive/translate.js
@@ -17,6 +17,7 @@ angular.module('pascalprecht.translate')
  * @param {string=} translate-attr-ATTR translate Translation id and put it into ATTR attribute.
  * @param {string=} translate-default will be used unless translation was successful
  * @param {boolean=} translate-compile (default true if present) defines locally activation of {@link pascalprecht.translate.$translateProvider#methods_usePostCompiling}
+ * @param {boolean=} translate-keep-content (default true if present) defines that in case a KEY could not be translated, that the existing content is left in the innerHTML}
  *
  * @example
    <example module="ngView">
@@ -272,12 +273,16 @@ function translateDirective($translate, $q, $interpolate, $compile, $parse, $roo
         };
 
         var applyTranslation = function (value, scope, successful, translateAttr) {
+          if (!successful) {
+            if (typeof scope.defaultText !== 'undefined') {
+              value = scope.defaultText;
+            }
+          }
           if (translateAttr === 'translate') {
             // default translate into innerHTML
-            if (!successful && typeof scope.defaultText !== 'undefined') {
-              value = scope.defaultText;
+            if (successful || (!successful && typeof iAttr.translateKeepContent === 'undefined')) {
+              iElement.empty().append(scope.preText + value + scope.postText);
             }
-            iElement.empty().append(scope.preText + value + scope.postText);
             var globallyEnabled = $translate.isPostCompilingEnabled();
             var locallyDefined = typeof tAttr.translateCompile !== 'undefined';
             var locallyEnabled = locallyDefined && tAttr.translateCompile !== 'false';
@@ -286,9 +291,6 @@ function translateDirective($translate, $q, $interpolate, $compile, $parse, $roo
             }
           } else {
             // translate attribute
-            if (!successful && typeof scope.defaultText !== 'undefined') {
-              value = scope.defaultText;
-            }
             var attributeName = iAttr.$attr[translateAttr];
             if (attributeName.substr(0, 5) === 'data-') {
               // ensure html5 data prefix is stripped

diff --git a/src/service/translate.js b/src/service/translate.js
@@ -1416,7 +1416,7 @@ function $translate($STORAGE_KEY, $windowProvider, $translateSanitizationProvide
             function () {
               // Look in the next fallback language for a translation.
               // It delays the resolving by passing another promise to resolve.
-              resolveForFallbackLanguage(fallbackLanguageIndex + 1, translationId, interpolateParams, Interpolator, defaultTranslationText).then(deferred.resolve);
+              return resolveForFallbackLanguage(fallbackLanguageIndex + 1, translationId, interpolateParams, Interpolator, defaultTranslationText).then(deferred.resolve, deferred.reject);
             }
           );
         } else {
@@ -1427,7 +1427,12 @@ function $translate($STORAGE_KEY, $windowProvider, $translateSanitizationProvide
           } else {
             // if no default translation is set and an error handler is defined, send it to the handler
             // and then return the result
-            deferred.resolve(translateByHandler(translationId, interpolateParams, defaultTranslationText));
+            if ($missingTranslationHandlerFactory) {
+              deferred.resolve(translateByHandler(translationId, interpolateParams));
+            } else {
+              deferred.reject(translateByHandler(translationId, interpolateParams));
+            }
+
           }
         }
         return deferred.promise;

diff --git a/test/unit/directive/translate.spec.js b/test/unit/directive/translate.spec.js
@@ -805,4 +805,51 @@ describe('pascalprecht.translate', function () {
       expect(element.attr('title')).toBe('Hallo');
     });
   });
+
+  describe('fallback, translateKeepContent and no missing translation handler', function () {
+
+    var $compile, $rootScope, element;
+
+    beforeEach(module('pascalprecht.translate', function ($translateProvider) {
+      $translateProvider
+        .translations('en', {
+          'HELLO': "Hello"
+        })
+        .translations('de', {
+          'HELLO': "Hallo",
+          'ONLY_DE': "Ich bin deutsch"
+        })
+        .preferredLanguage('en')
+        .fallbackLanguage('de');
+    }));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+    }));
+
+    it('should use preferred without override', function () {
+      element = $compile('<translate translate-keep-content>HELLO</translate>')($rootScope);
+      $rootScope.$digest();
+      expect(element.html()).toBe('Hello');
+    });
+
+    it('should use leave the inner content without change', function () {
+      element = $compile('<translate translate-keep-content>HELLONOTFOUND</translate>')($rootScope);
+      $rootScope.$digest();
+      expect(element.html()).toBe('HELLONOTFOUND');
+    });
+
+    it('should use leave the inner content without change if key provided as attribute', function () {
+      element = $compile('<div translate="HELLO" translate-keep-content>My template content</translate>')($rootScope);
+      $rootScope.$digest();
+      expect(element.html()).toBe('Hello');
+    });
+
+    it('should show fallback translation', function () {
+      element = $compile('<div translate translate-keep-content>ONLY_DE</divtranslate>')($rootScope);
+      $rootScope.$digest();
+      expect(element.html()).toBe('Ich bin deutsch');
+    });
+  });
 });