Angular过滤器生成HTML

Question

我有一个小的角度过滤器，可以在true值的位置插入一个(bootstrap)图标。 它可以工作，但是html被编码了：

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

我需要实现另一个过滤器来解码html吗？ 是否有一种“Angular”的方式来完成这个任务？

- Sucrenoir

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>

- Ben Lesh

---

@blesh 在这种情况下，你也加一分 :-) 你也回答了大量的问题！ - pkozlowski.opensource

我不能把指令定义为“true-icon”的原因是什么？指令名称总是驼峰式吗？ - Sucrenoir

Angular 只希望它们是驼峰式命名。如果您使用破折号声明它们，它们可能无法正常工作（IIRC）。 - Ben Lesh

好的，谢谢。我正在将“scrubbing” \r\n 替换为 <br/>，希望不会违反过滤器的预期使用。 - BenCr

你为什么说这不是过滤器的作用？在Angular教程中，自定义过滤器的第一个示例做的事情与HTML标记相同，但使用UTF字符。 - colllin

@colllin：那个例子是将Unicode字符添加到字符串中。OP在这里尝试生成/操作HTML并将其应用于DOM，这就是指令的作用。 - Ben Lesh

Answer 2

AngularJS默认会对表达式求值结果进行净化处理。如果要将HTML显示为标记，则有两个选项：

1. 使用ngSanitize模块中的ngBindHtml指令；

2. 使用ngBindHtmlUnsafe指令（不建议使用此指令，因为它可能存在安全风险）。

虽然上述方法可以使您的过滤器起作用，但也许你应该考虑将其转换为指令。

- pkozlowski.opensource

---

+1 给你，因为我们基本上说了同样的话...而且我一直看到你。 - Ben Lesh

我认为你的链接已经失效了。 - jcollum

Answer 3

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

在您的 ts 文件中添加该函数。

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

In html

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

- Tim H