Question

Handlebar的{{expression}}表格HTML-escapes返回值，而{{{expression}}}表单则没有。有没有办法将此功能添加到AngualarJS模板中，以便我们可以使用{{expression}}进行常规清理输出，使用{{{expression}}}进行可信，非转义的HTML表达式？

顺便说一下，我熟悉ng-bind-html指令。

Answer 1

回答：简短的回答是否定的。我从未遇到过这样的配置。您无法让{{{}}}在Angular中工作。

有用的解决方法：在不使用ng-bind-html指令的情况下，无法通过范围将未转义/未取消的HTML转换为视图。您可以向控制器添加辅助函数或添加可能使其更容易使用ng-bind-html（Plunk here）的过滤器，但您似乎仍需要ng-bind-html：

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MyController', function($scope, $sce) {
  $scope.someHtmlContent = "Label: <input name='test'>";

  $scope.h = function(html) {
    return $sce.trustAsHtml(html);
  };
}); 

app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });

然后你会像这样使用它：

<body ng-controller="MyController">
  <div ng-bind-html="someHtmlContent | trustAsHtml"> 
  </div>

  <div ng-bind-html="h(someHtmlContent)"> 
  </div>
</body>

Answer 2

这实际上是一个不必要的问题，接下来是一个更加不必要的解决方案:)但只是为了好玩，您可以执行以下操作：解析HTML并替换所有找到的{{{实例和}}} ng-bind-html $sce.trustAsHtml。我重复使用上面的过滤方法来实际执行app.directive("trust", function($compile){ return { terminal: true, priority: 4000, link: function(scope, elem){ var html = elem.html(); var re = /({{{)([^}]+)(}}})/g; var newHtml = html.replace(re, '<span ng-bind-html="$2 | trustAsHtml"></span>'); elem.html(newHtml); elem.removeAttr("trust"); $compile(elem)(scope); } }; }) .filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });：

<div trust>
  {{{html()}}}
  <div>
    {{{foo}}}
  </div>
</div>

用法是：

{{1}}

plunker

Answer 3

如果您真的想使用{{{}}}，则有可能：

var myApp = angular.module('myApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('{{{');
    $interpolateProvider.endSymbol('}}}');
});

然而，仅对可信赖的html不可能这样做。你的所有分隔符都会改变。

如何将{{{}}}语法用于可信赖的html？

3 个答案: