AngularJS textarea 换行符/换行符转换

Posted

技术标签:

【中文标题】AngularJS textarea 换行符/换行符转换【英文标题】:AngularJS textarea linebreak/newline conversion 【发布时间】:2014-08-16 06:38:36 【问题描述】:

我有一个通过 ng-model 填充内容的文本区域:

<textarea data-ng-model="messageBody"></textarea>

messageBody 需要使用换行符 (\n) 而不是换行符存储在数据库中。但是,当我使用正则表达式将换行符转换为换行符并将其传递给模型时,角度会转义 html。有没有办法将 HTML 直接传递给模型或文本区域而不进行转换?或者,有没有更好的方法在 textarea 换行符和换行符之间进行转换?

更新

进一步检查,这不是角度问题。我们正在使用 SQL 脚本填充数据库 (Postgres)。原来插入数据库的字符串没有被转义。由于字符串包含换行符,这意味着它们被直接作为文本插入。然后,前端的换行处理似乎与最初填充的结果不一致。长话短说 - 我转义了初始数据库内容以适应换行符,一切正常。

【问题讨论】:

【参考方案1】:

文本区域内的新行是结果字符串中的新行 (\n)。

这个fiddle 展示了这种行为。

如果你想在数据库中存储\n,没有什么可做的,字符串已经是那个格式了。

如果“换行符”是指&lt;br&gt; 标签,而实际上是指该字符串来自包含此类标签的数据库,那么我想您应该事先替换它们。

理想情况下,您的数据库应该包含换行符 (\n),您应该按原样保存并从中获取换行符,不进行转换。

【讨论】:

然后你可以在你的例子中使用&lt;pre&gt; text &lt;/pre&gt; - 如果你想显示保持换行格式不变的文本。【参考方案2】:

是的,您可以在 AngularJS 中使用“SCE / 严格上下文转义”来执行此操作。继续将换行符转换为换行符并将其传递给模型。

然后当您在模板中显示数据时,您可以使用$sce.trustAsHtml() 来保留HTML 内容,然后使用ng-bind-html 指令将其绑定到DOM。下面是它在控制器中的显示示例:

myApp.controller( 'contentCtrl', [ '$scope', '$sce', function( $scope, $sce )
  $scope.messageBody = $sce.trustAsHtml( 'Hello <br> World' );
]);

然后在你的模板中,像这样绑定它:

<div ng-bind-html="messageBody"></div>

更多关于$sce的信息请看AngularJS Docs.

【讨论】:

以上是关于AngularJS textarea 换行符/换行符转换的主要内容,如果未能解决你的问题,请参考以下文章

不要在angularjs的textarea中输入超过20个逗号分隔或换行符分隔的序列号和字母数字

AngularJS:$http.post 使用 textarea 的多个值?

textArea换行符转<br/> <br/> 转 textArea换行符

如何初始化 CKEditor textarea 换行符,就像 html textarea 换行符一样

Textarea 仅在换行符处换行

保留 TextArea 中的换行符