17

On Angular 1.3.x with latest version of angular-translate. Using $sanitize it seems there are problems when using filter or service directly, but it works when using the directive.

Suggestions?

Here is an example:

var myApp = angular.module('myApp', [ 'pascalprecht.translate', 'ngSanitize' ]);

myApp.config(function($translateProvider) {
    $translateProvider.useSanitizeValueStrategy("sanitize");
    $translateProvider.preferredLanguage('en');
    $translateProvider.translations('en', {
        UTF: 'öéü',
    });
});

myApp.controller("myCtrl", function($scope, $translate) {
    $translate("UTF").then(function(trans) {
        $scope.UTFCTRL = trans;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-sanitize.min.js"></script>
<script src="http://rawgit.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div>
        Wrong: <h1>{{ 'UTF' | translate }}</h1>
    </div>
    
    <div>
        Ok: <h1 translate="UTF"></h1>
    </div>
    
    <div>
        Wrong: <h1>{{ UTFCTRL }}</h1>
    </div>
</div>

On jsfiddle: http://jsfiddle.net/gnvpo6aa/

fusio
  • 3,595
  • 6
  • 33
  • 47
  • 1
    This is a WONTFIX for the translate filter at least: https://github.com/angular-translate/angular-translate/issues/440 :´( I'm having issues with both the filter and the service. – Sámal Rasmussen Jul 07 '15 at 18:28

2 Answers2

38

At the moment, you have two options:

  1. Use the strategy sanitizeParameters which will only sanitize the dynamic parameters, but not the actual translation (template). If you have the translation under control (but not the dynamic values), this will work.
  2. Use the strategy escape (or escapeParameters) which does not use sanitization but escaping.

Disclaimer: I'm co-maintaining angular-translate.

Edit (12.01.2016): I'd created this matrix overview of all variants.

knalli
  • 1,973
  • 19
  • 31
  • Found this via the issue 1011, thanks for the work around, and the plugin! – StephenMtl Jan 06 '16 at 20:17
  • 1
    Having `sanitize` as strategy, UTF-8 characters seem to work when used with `translate="KEY"` attribute. – ruuter Jan 22 '16 at 14:31
  • this because when using the translate directive the sanitize doesn't work... even html tags are acting as usual – darkylmnx Feb 12 '16 at 23:33
  • 1
    @knalli : nice matrix, but it seems that the `null` strategy has the same effect as the 'sce' one – Lucas Cimon Feb 19 '16 at 09:26
  • I guess you are mixing sanitizing and escaping. Using a sanitized strings does not result into escaped strings. – knalli Feb 19 '16 at 12:48
  • 1
    @knalli @LucasCimon Regarding Lucas' comment about strategies `null` and `sce` behaving the same in the matrix. I see that _As of version 1.2, AngularJS ships with SCE enabled by default._ https://docs.angularjs.org/api/ng/service/$sce Thus, this is likely why `null` and `sce` work the same. Yes? – Michael R Mar 16 '17 at 18:55
0

As said in gitHub issue

Using sce solved the issue

$translateProvider.useSanitizeValueStrategy("sce");
saad
  • 1,354
  • 1
  • 14
  • 21