在 angularjs 中将 Html 作为翻译装饰器的参数发送

Question

当我尝试在翻译装饰器中发送 html 作为参数时，我的 html 代码显示为文本而不是 html。就像下面的代码：

<!doctype html>
<html ng-app="myApp">
  <head>
<script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.15.2/angular-translate.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.15.2/angular-translate-interpolation-messageformat.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.15.2/angular-translate-storage-cookie.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.15.2/angular-translate-storage-local.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.15.2/angular-translate-loader-url.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.15.2/angular-translate-loader-static-files.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.15.2/angular-translate-handler-log.js"></script>
<script src="script.js"></script>
 </head>
  <body>

<div ng-controller="Ctrl">
  <p>{{ 'HEADLINE' | translate }}</p>
  <p>{{ 'PARAGRAPH' | translate }}</p>
</div>


  </body>

var translations = {
  HEADLINE: 'What an awesome module!',
  PARAGRAPH: 'This is cool link <a href="http://google.com">test</a> Check it out!'
};

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

app.config(['$translateProvider', function ($translateProvider) {
  // add translation table
  $translateProvider.translations('en', translations);
   $translateProvider.preferredLanguage('en');
 }]);

app.controller('Ctrl', ['$scope', function ($scope) {

}]);

结果我得到：

This is cool link <a href="http://google.com">test</a> Check it out!

html 在浏览器中自行编码，而不是锚点 html 表示。我希望将锚点处理为 html 标签。

有人有建议吗？

Answer 1

为了实际处理 HTML 而不是将其作为字符输出，您可以使用 ng-bind-html 指令。在您的情况下，它将如下所示：

<p ng-bind-html="'PARAGRAPH' | translate"></p>

在 angularjs 中将 Html 作为翻译装饰器的参数发送

Sending Html as parameter in translate decorator in angularjs

html

parameters

translation

decorator

angularjs