Question

好的，这应该相当简单......

使用角度。我输出了一个用textarea编辑的文本：

{{model | newline2br}}

如果我不添加过滤器，则只会忽略所有新行。所以我做了一些谷歌搜索，写了一个过滤器，newline2br，这样做 - 用<br />

替换新行

但现在文字显示为文字<br />!

这是检查窗口中的输出：

<div ng-show="showText" ng-mouseleave="showText = false" class="textwrapper ng-hide">asdjfhaslkjdfh aoiuyqoiweury iufyaoiusydf oiuaysdfiouy aiuysdfoiuy asdfo iuyasdf iouyasdfoiuy asdoifuy aoiusydf oiauysdfoiuays df oiauysdf iouaysdofiuy asioduyf aoiusydf oiauysdfo iuyasdoiufy aoisudyf oiuaysdifuy asdoiufysf<br />hello this is cool<br />I just found out that I can do shift-enter!<br />now I solved the problem with this... :))))</div>

为什么？如何正确编写过滤器以使div显示新行？

Answer 1

这是因为AngularJS默认情况下以字符串形式转义HTML标记（用HTML实体替换它们），以避免出现XSS和其他一些安全问题。要显示未转义的受信任内容，您可以使用ngBindHTMLUnsafe（在较旧的AngularJS版本中），或使用1.2及更新版本中的ngBindHTML和SCE。例如：

<div>{{sometext|newline2br}}</div>

将被重写为（低于1.2）：

<div ng-bind-html-unsafe="sometext|newline2br"></div>

1.2及以上：

<div ng-bind-html="sometext|newline2br|trusted"></div>

使用可信过滤器：

app
  .filter('trusted', function($sce) {
    // You can use this one as `value|newline2br|trusted`, 
    // but I don't recommend it
    return function(input) {
      return $sce.trustAsHtml(input)
    }
  })

或者更好：

<div ng-bind-html="sometext|newline2br"></div>

和

app
  .filter('newline2br', function($sce) {
    // This is my preferred way
    return function(input) {
      return $sce.trustAsHtml(input.replace(/\n/g, "<br>"))
    }
  })

Plunker：http://plnkr.co/LIxFVpi6ChtTLEni11qy

Answer 2

你也应该有这个，否则你永远不会看到文字，因为它永远不会出现在第一个地方：

ng-init="showText=true"

除了提到的 tungd 之外，你要找的最后一件事是：

<div class="textwrapper" ng-bind-html-unsafe="model|newline2br" ng-init="showText=true" ng-show="showText" ng-mouseleave="showText = false">

这是fiddle to demonstrate。

Answer 3

根据我的理解，你正在隐藏div，所以鼠标永远不会越过它来显示div。

新行，br纯文本

3 个答案: