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

PHP*_*Pst 5 angularjs

Handlebar的{{expression}}表单HTML-escapes返回值,而其{{{expression}}}表单不返回.有没有办法将此功能添加到AngualarJS模板中,以便我们可以使用{{expression}}常规清理输出和{{{expression}}}可信,非转义HTML表达式?

顺便说一句,我熟悉ng-bind-html指令.

Mic*_*ryl 4

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

有用的解决方法:如果不使用 ng-bind-html 指令,则无法通过范围将未转义/未清理的 HTML 放入视图中。您可以向控制器添加一个辅助函数,或者添加一个过滤器,这可能会使 ng-bind-html 的使用变得更容易(这里是 Plunk),但您似乎仍然需要 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; });
Run Code Online (Sandbox Code Playgroud)

然后你会像这样使用它:

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

  <div ng-bind-html="h(someHtmlContent)"> 
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)