带换行符的span标签的动态生成

Question

虽然我为Angular创建了json结构以正确地呈现我的数据，但我只是将一个特定的标记替换为

</br>

或

   

文本，以便以适当的格式显示整个文本。

  if(e.transcription.indexOf("%HESITATION")>-1)
     e.transcription =  e.transcription.replace("%HESITATION",   ');

或

if(e.transcription.indexOf("%HESITATION")>-1)
     e.transcription =  e.transcription.replace("%HESITATION", </br></br>;');

但是，生成的字符串将这些元素显示为字符串，它既不会按照预期呈现它，也不会相应地显示带换行符的文本。

要在html中正确换行，正确的替换方式是什么？

我只是将这些文本以Angular格式打印出来，格式如下；

<span class="script-text">{{thread.transcript}}</span>

但是生成的输出是

Hello </br></br> Word
Hello &nbsp;&nbsp; Word

Answer 1

​

var app = angular.module("myApp", ['ngSanitize']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="value">
<div ng-bind-html="value"></div>
</div>

​

Answer 2

您可以使用ng-bind-html指令来完成此操作。尝试以下操作：

<span class="script-text" ng-bind-html="thread.transcript"></span>

这需要在您的模块中包含ngSanitize。在this guide上阅读更多内容。