fix(directive): fix missing update using dynamic translationIds

Using a dynamic (interpolated) translationId, the content was not being refreshed if the interpolation has been evaluated to an empty string. Fixes #854
angular-translate · Jan 12, 2015 · faebe19 · faebe19
1 parent 44cdad2
commit faebe19
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/src/directive/translate.js b/src/directive/translate.js
@@ -152,8 +152,19 @@ angular.module('pascalprecht.translate')
           });
         };
 
+        var firstAttributeChangedEvent = true;
         iAttr.$observe('translate', function (translationId) {
-          observeElementTranslation(translationId);
+          if (typeof translationId === 'undefined') {
+            // case of element "<translate>xyz</translate>"
+            observeElementTranslation('');
+          } else {
+            // case of regular attribute
+            if (translationId !== '' || !firstAttributeChangedEvent) {
+              translationIds.translate = translationId;
+              updateTranslations();
+            }
+          }
+          firstAttributeChangedEvent = false;
         });
 
         for (var translateAttr in iAttr) {
@@ -193,20 +204,25 @@ angular.module('pascalprecht.translate')
         // Master update function
         var updateTranslations = function () {
           for (var key in translationIds) {
-            if (translationIds.hasOwnProperty(key) && translationIds[key]) {
+            if (translationIds.hasOwnProperty(key)) {
               updateTranslation(key, translationIds[key], scope, scope.interpolateParams, scope.defaultText);
             }
           }
         };
 
         // Put translation processing function outside loop
         var updateTranslation = function(translateAttr, translationId, scope, interpolateParams, defaultTranslationText) {
-          $translate(translationId, interpolateParams, translateInterpolation, defaultTranslationText)
-            .then(function (translation) {
-              applyTranslation(translation, scope, true, translateAttr);
-            }, function (translationId) {
-              applyTranslation(translationId, scope, false, translateAttr);
-            });
+          if (translationId) {
+            $translate(translationId, interpolateParams, translateInterpolation, defaultTranslationText)
+              .then(function (translation) {
+                applyTranslation(translation, scope, true, translateAttr);
+              }, function (translationId) {
+                applyTranslation(translationId, scope, false, translateAttr);
+              });
+          } else {
+            // as an empty string cannot be translated, we can solve this using successful=false
+            applyTranslation(translationId, scope, false, translateAttr);
+          }
         };
 
         var applyTranslation = function (value, scope, successful, translateAttr) {

diff --git a/test/unit/directive/translate.spec.js b/test/unit/directive/translate.spec.js
@@ -170,6 +170,27 @@ describe('pascalprecht.translate', function () {
       });
     });
 
+    describe('after a translation was successful should return empty string', function () {
+      it('(translation id is passed as interpolation in attribute', function () {
+        $rootScope.translationId = 'TRANSLATION_ID';
+        element = $compile('<div translate="{{translationId}}"></div>')($rootScope);
+        $rootScope.$digest();
+        expect(element.text()).toBe('foo');
+        $rootScope.translationId = '';
+        $rootScope.$digest();
+        expect(element.text()).toBe('');
+      });
+      it('(translation id is passed as interpolation in text', function () {
+        $rootScope.translationId = 'TRANSLATION_ID';
+        element = $compile('<div translate>{{translationId}}</div>')($rootScope);
+        $rootScope.$digest();
+        expect(element.text()).toBe('foo');
+        $rootScope.translationId = '';
+        $rootScope.$digest();
+        expect(element.text()).toBe('');
+      });
+    });
+
     describe('Passing values', function () {
 
       describe('whereas no values given', function () {