javascript - 生成 html 的 Angular 过滤器

Question

我有一个小的角度过滤器，它插入一个（引导）图标来代替真值。它可以工作，但 html 已编码：

  var conApp = angular.module('conApp', []);
  conApp.filter('trueIcon', function($filter){
    return function(booleanValue){
        return booleanValue ? '<i class="icon-ok"></i>' : '';
    }
  });

我必须实现另一个过滤器来解码 html 吗？有这样做的“角度”方式吗？

Answer 1

您需要使用 ng-bind-html 来呈现 html。

<span ng-bind-html="foo | trueIcon"></span>

也就是说......这真的不是过滤器的用途。过滤器更多地用于清理写入视图的数据，而不是生成视图/DOM 本身的元素。您最好为此创建一个指令：

app.directive('trueIcon', function() {
   return {
      restrict: 'E',
      template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>',
      scope: {
         value: '='
      }
   };
});

<true-icon value="foo"></true-icon>

Answer 2

默认情况下，AngularJS 正在清理表达式评估的结果。要将 HTML 显示为标记，您有 2 个选项：

• http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml（来自 ngSanitize 模块）
• http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe（我不推荐这个，因为它会带来潜在的安全风险）。

虽然上述内容将使您的过滤器工作，但也许您应该考虑将其转换为指令？

Answer 3

对于将 \r\n 转换为的情况，我发现的另一种方法
是使用一个小函数和 *ngFor。

在您的 ts 文件中，添加函数

splitLines(text: String): string[] {
  return text.split(/\r?\n/);
}

在 html 中

<span *ngFor="let row of splitLines(multilineStringVariable)">
  {{row}}<br/>
</span>