Javascript AngularJS 将 <br> 呈现为文本而不是换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14963444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS is rendering <br> as text not as a newline
提问by Lance
I am sure this has been asked before but I cannot find the answer.
我确信以前有人问过这个问题，但我找不到答案。
I have an AngularJS script that is pulling from a DB and then rendering to content. Everything is working correctly except a couple of places that I am trying to concatenate some words with new lines between them.
我有一个 AngularJS 脚本，它从数据库中提取然后渲染到内容。除了我试图用新行连接一些单词的几个地方之外，一切都正常工作。
**in the script.js**
groupedList[aIndex].CATEGORY = existingCategory+'\n'+thisCategory;
groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory;
If I use the first line of the above code I don't see anything but there is not a new line in the redered html. If I use the second line the <br>get rendered as text and the output looks like this:
如果我使用上面代码的第一行，我什么也看不到，但在重新编写的 html 中没有新行。如果我使用第二行，则将<br>呈现为文本，输出如下所示：
Instinct<br>Media
instead of
代替
Instinct
Media
I can post the full script if that would be helpful but I am guessing there is something simple that I am just not seeing.
如果有帮助，我可以发布完整的脚本，但我猜有一些我没有看到的简单内容。
UPDATEHere is the full js
更新这是完整的js
function qCtrl($scope, $filter, $http, $timeout){
$scope.getCategories = function(){$http.post('quote.cfc?method=getCategories').success(function(data) { $scope.categories = data; }); }
$scope.getClassifications = function(){$http.post('quote.cfc?method=getClassifications').success(function(data) { $scope.classifications = data; }); }
$scope.getIndustries = function(){$http.post('quote.cfc?method=getIndustries').success(function(data) { $scope.industries = data; }); }
$scope.getKeywords = function(){$http.post('quote.cfc?method=getKeywords').success(function(data) { $scope.keywords = data; }); }
$scope.getSources = function(){$http.post('quote.cfc?method=getSources').success(function(data) { $scope.sources = data; }); }
$scope.getAllQuotes = function(){$http.post('quote.cfc?method=getAllQuotesJoined').success(function(data) { $scope.allQuotes = data; }); }
$scope.initScopes = function (){
$scope.getCategories();
$scope.getClassifications();
$scope.getIndustries();
$scope.getKeywords();
$scope.getSources();
$scope.getAllQuotes();
}
$scope.initScopes();
// SEARCH QUOTES
$scope.filteredQuotes = $scope.allQuotes;
$scope.search = {searchField:''};
$scope.searchQuote = function(){
var filter = $filter('filter');
var searchCrit = $scope.search;
var newlist = $scope.allQuotes;
var groupedList = [];
var idList = [];
newlist = filter(newlist,{TESTQUOTE:searchCrit.searchField});
for(i=0;i<10;i++){
aIndex = idList.contains(newlist[i].TESTIMONIALID);
if(aIndex >= 0){
thisKeyword = newlist[i].KEYWORD;
thisClassification = newlist[i].CLASSIFICATION;
thisCategory = newlist[i].CATEGORY;
existingKeyword = groupedList[aIndex].KEYWORD;
existingClassification = groupedList[aIndex].CLASSIFICATION;
existingCategory = groupedList[aIndex].CATEGORY;
if(thisKeyword != '' && existingKeyword.indexOf(thisKeyword) == -1){
groupedList[aIndex].KEYWORD = existingKeyword+' - '+thisKeyword;
}
if(thisClassification != '' && existingClassification.indexOf(thisClassification) == -1){
groupedList[aIndex].CLASSIFICATION = existingClassification+' \n '+thisClassification;
}
if(thisCategory != '' && existingCategory.indexOf(thisCategory) == -1){
groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory;
}
} else {
idList.push(newlist[i].TESTIMONIALID);
groupedList.push(newlist[i]);
}
}
$scope.filteredQuotes = groupedList;
}
}
Array.prototype.contains = function ( needle ) {
for (j in this) {
if (this[j] == needle) return j;
}
return -1;
}
Here is the HTML
这是 HTML
<div ng-repeat="q in filteredQuotes" class="well clearfix">
<h3>{{q.TITLE}}</h3>
<div class="row-fluid" style="margin-bottom:5px;">
<div class="span3 well-small whBG"><h4>Classification</h4>{{q.CLASSIFICATION}}</div>
<div class="span3 well-small whBG pipeHolder"><h4>Categories</h4>{{q.CATEGORY}}</div>
<div class="span3 well-small whBG"><h4>Key Words</h4>{{q.KEYWORD}}</div>
<div class="span3 well-small whBG"><h4>Additional</h4>Industry = {{q.INDUSTRY}}<br>Source = {{q.SOURCE}}</div>
</div>
<div class="well whBG">{{q.TESTQUOTE}}</div>
<div class="tiny">
Source comment : {{q.SOURCECOMMENT}}<br>
Additional Comment : {{q.COMMENT}}
</div>
</div>
</div>
采纳答案by Shmiddty
I could be wrong because I've never used Angular, but I believe you are probably using ng-bind, which will create just a TextNode.
我可能是错的，因为我从未使用过 Angular，但我相信您可能正在使用ng-bind，它只会创建一个 TextNode。
You will want to use ng-bind-htmlinstead.
你会想要使用它ng-bind-html。
http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml
http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml
Update: It looks like you'll need to use ng-bind-html-unsafe='q.category'
更新：看起来你需要使用ng-bind-html-unsafe='q.category'
http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe
http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe
Here's a demo:
这是一个演示：
回答by vinesh
You can use \nto concatenate words and then apply this style to container div.
您可以使用\n来连接单词，然后将此样式应用于容器 div。
style="white-space: pre;"
More info can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
更多信息可以在https://developer.mozilla.org/en-US/docs/Web/CSS/white-space找到
<p style="white-space: pre;">
This is normal text.
</p>
<p style="white-space: pre;">
This
text
contains
new lines.
</p>回答by Ben Lesh
You need to either use ng-bind-html-unsafe... or you need to include the ngSanitize module and use ng-bind-html:
您需要使用ng-bind-html-unsafe... 或者您需要包含 ngSanitize 模块并使用ng-bind-html：
with ng-bind-html-unsafe
使用 ng-bind-html-unsafe
Use this if you trust the source of the HTML you're rendering it will render the raw output of whatever you put into it.
如果您信任正在呈现的 HTML 的来源，则使用它，它将呈现您放入其中的任何内容的原始输出。
<div><h4>Categories</h4><span ng-bind-html-unsafe="q.CATEGORY"></span></div>
OR with ng-bind-html
或使用 ng-bind-html
Use this if you DON'T trust the source of the HTML (i.e. it's user input). It will sanitize the html to make sure it doesn't include things like script tags or other sources of potential security risks.
如果您不信任 HTML 的来源（即用户输入），请使用此选项。它将清理 html 以确保它不包含脚本标记或其他潜在安全风险来源之类的内容。
Make sure you include this:
确保你包括这个：
<script src="http://code.angularjs.org/1.0.4/angular-sanitize.min.js"></script>
Then reference it in your application module:
然后在您的应用程序模块中引用它：
var app = angular.module('myApp', ['ngSanitize']);
THEN use it:
然后使用它：
<div><h4>Categories</h4><span ng-bind-html="q.CATEGORY"></span></div>
回答by X-Coder
Why so complicated?
为什么这么复杂？
I solved my problem this way simply:
我以这种方式简单地解决了我的问题：
<pre>{{existingCategory+thisCategory}}</pre>
It will make <br />automatically if the string contains '\n' that contain when I was saving data from textarea.
<br />如果字符串包含我从 textarea 保存数据时包含的 '\n' ，它将自动生成。
回答by Ishak Ali
I've used like this
我这样用过
function chatSearchCtrl($scope, $http,$sce) {
// some more my code
// take this
data['message'] = $sce.trustAsHtml(data['message']);
$scope.searchresults = data;
and in html I did
在 html 中我做了
<p class="clsPyType clsChatBoxPadding" ng-bind-html="searchresults.message"></p>
thats it I get my <br/>tag rendered
就是这样，我得到了我的<br/>标签渲染
![Javascript 返回 [对象 HTMLSpanElement]](/res/img/loading.gif)