在 angular 中使用“<”或“>”作为参数值的一部分翻译并在文本区域中显示为 ng-model

Using "<" or ">" as part of parameter value in angular translate and displaying in textarea as ng-model

我有一个 angular 带参数的翻译字符串。参数名称也可以是 <test> 的形式。当翻译显示在文本区域中时,我们最终看到 &lt;test&gt; 而不是 <test>。有没有办法让它显示为 <test>.

angular 翻译文件是:

"MESSAGE_KEY": "Display {someParam} displayed",

消息是:

var message = $filter('translate')('MESSAGE_KEY',
                {someParam: '<test>'},
                'messageformat');

当我将消息用作 ng-model 时,我在文本区域中看到的是

&lt;test&gt;

注1:contenteditable由于各种原因我们使用起来会很棘手 注2:我们将消毒策略设置如下

$translateProvider.useSanitizeValueStrategy('escapeParameters', 'sanitizeParameters');

编辑:包含了一个工作片段。 运行 用于查看工作示例的代码片段。

var translations = {
  MESSAGE_KEY: "Display {{someParam}} displayed"
};

var app = angular.module('AsdDTestApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.translations('en', translations);
  $translateProvider.preferredLanguage('en');
  // Enable escaping of HTML
  $translateProvider.useSanitizeValueStrategy('sceParameters');
}]);

app.controller('Ctrl', ['$scope', '$filter', function ($scope, $filter) {
  var vm = this;
  vm.message = $filter('translate')('MESSAGE_KEY', {someParam: '<test>'}, 'messageformat');
}]);
<!doctype html>
<html ng-app="AsdDTestApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
  <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.17.0/angular-translate.js"></script>
</head>

<body>
  <div ng-controller="Ctrl as vm">
    Here is my input box:
      <input type="textarea" ng-model="vm.message">
  </div>
</body>
</html>

你需要使用

$translateProvider.useSanitizeValueStrategy('sceParameters');

而不是

$translateProvider.useSanitizeValueStrategy('escapeParameters', 'sanitizeParameters');

sanitize: sanitizes HTML in the translation text using $sanitize

escape: escapes HTML in the translation

sanitizeParameters: sanitizes HTML in the values of the interpolation parameters using $sanitize

escapeParameters: escapes HTML in the values of the interpolation parameters

sce: wraps HTML in $sce.trustAsHtml(value)

sceParameters: wraps HTML in the values of the interpolation parameters in $sce.trustAsHtml(value)

more on escaping variables in angular translate