feat(directive): introduce attr translate-sanitize-strategy

angular-translate · Jul 17, 2017 · 41c7e1f · 41c7e1f
1 parent 4a2c3ab
commit 41c7e1f
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 2 deletions.
diff --git a/src/directive/translate-attr.js b/src/directive/translate-attr.js
@@ -11,6 +11,7 @@ angular.module('pascalprecht.translate')
  *
  * @param {string=} translate-attr Object literal mapping attributes to translation ids.
  * @param {string=} translate-values Values to pass into the translation ids. Can be passed as object literal string.
+ * @param {string=} translate-sanitize-strategy defines locally sanitize strategy
  *
  * @example
    <example module="ngView">
@@ -67,6 +68,7 @@ function translateAttrDirective($translate, $rootScope) {
 
       var translateAttr,
           translateValues,
+          translateSanitizeStrategy,
           previousAttributes = {};
 
       // Main update translations function
@@ -81,7 +83,7 @@ function translateAttrDirective($translate, $rootScope) {
           if (scope.translateNamespace && translationId.charAt(0) === '.') {
             translationId = scope.translateNamespace + translationId;
           }
-          $translate(translationId, translateValues, attr.translateInterpolation, undefined, scope.translateLanguage)
+          $translate(translationId, translateValues, attr.translateInterpolation, undefined, scope.translateLanguage, translateSanitizeStrategy)
             .then(function (translation) {
               element.attr(attributeName, translation);
             }, function (translationId) {
@@ -112,6 +114,13 @@ function translateAttrDirective($translate, $rootScope) {
         function (newValue) { translateValues = newValue; },
         updateTranslations
       );
+      // Watch for sanitize strategy changes
+      watchAttribute(
+        scope,
+        attr.translateSanitizeStrategy,
+        function (newValue) { translateSanitizeStrategy = newValue; },
+        updateTranslations
+      );
 
       if (attr.translateValues) {
         scope.$watch(attr.translateValues, updateTranslations, true);

diff --git a/src/directive/translate.js b/src/directive/translate.js
@@ -17,6 +17,7 @@ angular.module('pascalprecht.translate')
  * @param {string=} translate-values Values to pass into translation id. Can be passed as object literal string or interpolated object.
  * @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 {string=} translate-sanitize-strategy defines locally sanitize strategy
  * @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}
  *
@@ -123,6 +124,9 @@ function translateDirective($translate, $interpolate, $compile, $parse, $rootSco
       var translateInterpolation = (tAttr.translateInterpolation) ?
         tAttr.translateInterpolation : undefined;
 
+      var translateSanitizeStrategyExist = (tAttr.translateSanitizeStrategy) ?
+        tAttr.translateSanitizeStrategy : undefined;
+
       var translateValueExist = tElement[0].outerHTML.match(/translate-value-+/i);
 
       var interpolateRegExp = '^(.*)(' + $interpolate.startSymbol() + '.*' + $interpolate.endSymbol() + ')(.*)',
@@ -226,6 +230,13 @@ function translateDirective($translate, $interpolate, $compile, $parse, $rootSco
           updateTranslations();
         });
 
+        if (translateSanitizeStrategyExist) {
+          iAttr.$observe('translateSanitizeStrategy', function (value) {
+            scope.sanitizeStrategy = $parse(value)(scope.$parent);
+            updateTranslations();
+          });
+        }
+
         if (translateValuesExist) {
           iAttr.$observe('translateValues', function (interpolateParams) {
             if (interpolateParams) {
@@ -267,7 +278,7 @@ function translateDirective($translate, $interpolate, $compile, $parse, $rootSco
               translationId = translateNamespace + translationId;
             }
 
-            $translate(translationId, interpolateParams, translateInterpolation, defaultTranslationText, scope.translateLanguage)
+            $translate(translationId, interpolateParams, translateInterpolation, defaultTranslationText, scope.translateLanguage, scope.sanitizeStrategy)
               .then(function (translation) {
                 applyTranslation(translation, scope, true, translateAttr);
               }, function (translationId) {

diff --git a/test/unit/directive/translate-attr.spec.js b/test/unit/directive/translate-attr.spec.js
@@ -172,5 +172,42 @@ describe('pascalprecht.translate', function () {
       });
     });
 
+    describe('translate-sanitize-strategy', function () {
+      it('should sanitize with default strategy', function () {
+        $rootScope.attributes = {'attr' : 'with_value'};
+        $rootScope.values = {'value' : '<b>test</b>'};
+
+        element = $compile('<div translate-attr="attributes" translate-values="values" />')($rootScope);
+
+        $rootScope.$digest();
+        expect(element.attr('attr')).toEqual('This is <b>test</b>');
+      });
+
+      it('should use overridden strategy', function () {
+        $rootScope.attributes = {'attr' : 'with_value'};
+        $rootScope.values = {'value' : '<b>test</b>'};
+        $rootScope.strategy = 'escaped';
+
+        element = $compile('<div translate-attr="attributes" translate-values="values" translate-sanitize-strategy="strategy" />')($rootScope);
+
+        $rootScope.$digest();
+        expect(element.attr('attr')).toEqual('This is &lt;b&gt;test&lt;/b&gt;');
+      });
+
+      it('should support changed strategy', function () {
+        $rootScope.attributes = {'attr' : 'with_value'};
+        $rootScope.values = {'value' : '<b>test</b>'};
+        $rootScope.strategy = 'escaped';
+
+        element = $compile('<div translate-attr="attributes" translate-values="values" translate-sanitize-strategy="strategy" />')($rootScope);
+
+        $rootScope.$digest();
+        expect(element.attr('attr')).toEqual('This is &lt;b&gt;test&lt;/b&gt;');
+
+        $rootScope.strategy = null;
+        $rootScope.$digest();
+        expect(element.attr('attr')).toEqual('This is <b>test</b>');
+      });
+    });
   });
 });
diff --git a/test/unit/directive/translate.spec.js b/test/unit/directive/translate.spec.js
@@ -559,6 +559,33 @@ describe('pascalprecht.translate', function () {
     });
   });
 
+  describe('translate-sanitize-strategy extension', function () {
+
+    var $rootScope, $compile, element;
+
+    beforeEach(module('pascalprecht.translate', function ($translateProvider, $provide) {
+
+      $translateProvider.translations('en', {
+        'hacking' : '{{v}}'
+      });
+
+      $translateProvider.preferredLanguage('en');
+    }));
+
+    beforeEach(inject(function (_$rootScope_, _$compile_) {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+    }));
+
+    it('should use overridden strategy', function () {
+      element = $compile('<p translate="hacking" translate-values="{v: \'<u>test</u>\'}" translate-sanitize-strategy="\'escaped\'"></p>')($rootScope);
+      $rootScope.$digest();
+      // Verify content is escaped.
+      expect(element.text()).toEqual('<u>test</u>'); // possible because text
+      expect(element.html()).toEqual('&lt;u&gt;test&lt;/u&gt;');
+    });
+  });
+
   describe('translate-compile extension (globally disabled)', function () {
 
     var $rootScope, $compile, element, $translate;