angularjs – 如何对可信赖的html使用{{{}}}语法？

发布时间：2020-12-17 10:22:20 所属栏目：安全来源：网络整理

导读：Handlebar的{{expression}}表单返回的值为{{{expression}}}表单时返回的 HTML-escapes值.有没有办法将此功能添加到AngualarJS模板中,以便我们可以使用{{expression}}进行常规清理输出,使用{{{expression}}}进行可信,非转义HTML表达式？顺便说一下,我熟悉ng-

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

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

答：简短的回答是否定的.我从未遇到过这样的配置.您无法让{{{}}}在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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!