AngularJS将文本渲染为不作为换行符

我确信以前有人问过这个问题，但是我找不到答案。

我有一个AngularJS脚本是从数据库拉，然后渲染到内容。 除了几个地方，我试图连接一些单词之间的新行，一切工作正常。

**in the script.js** groupedList[aIndex].CATEGORY = existingCategory+'\n'+thisCategory; groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory; 

如果我使用上面的代码的第一行，我没有看到任何东西，但在redered html中没有新行。 如果我使用第二行，则将以文本forms呈现，输出如下所示：

 Instinct<br>Media 

代替

 Instinct Media 

我可以发布完整的脚本，如果这将是有益的，但我猜测有一些简单的，我只是没有看到。

更新这里是完整的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; } 

这是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> 

Answer 1

我可能是错的，因为我从来没有使用Angular，但我相信你可能使用ng-bind ，这将创build一个TextNode。

你会想要使用ng-bind-html来代替。

http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml

更新 ：看起来你需要使用ng-bind-html-unsafe='q.category'

http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

这是一个演示：

http://jsfiddle.net/VFVMv/

Answer 2

您可以使用\n连接单词，然后将此样式应用于容器div。

 style="white-space: pre;" 

更多信息可以在https://developer.mozilla.org/en-US/docs/Web/CSS/white-spacefind。;

 <p style="white-space: pre;"> This is normal text. </p> <p style="white-space: pre;"> This text contains new lines. </p> 

Answer 3

您需要使用ng-bind-html-unsafe …或者您需要包含ngSanitize模块并使用ng-bind-html ：

与ng-bind-html-unsafe

如果你相信你正在渲染的HTML的源代码，就使用它，它会渲染你input的任何东西的原始输出。

 <div><h4>Categories</h4><span ng-bind-html-unsafe="q.CATEGORY"></span></div> 

---

或与ng-bind-html

如果您不相信HTML的来源（即用户input），请使用此方法。 它将清理html，确保它不包含脚本标记或其他潜在安全风险源。

确保你包含这个：

 <script src="1.0.4/angular-sanitize.min.js"></script> 

然后在您的应用程序模块中引用它：

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

那么使用它：

 <div><h4>Categories</h4><span ng-bind-html="q.CATEGORY"></span></div> 

Answer 4

为什么这么复杂？

我这样简单地解决了我的问题：

  <pre>{{existingCategory+thisCategory}}</pre> 

如果string中包含'\ n'，那么它将自动<br />包含在我从textarea保存数据的时候。

Answer 5

我用这个

 function chatSearchCtrl($scope, $http,$sce) { // some more my code // take this data['message'] = $sce.trustAsHtml(data['message']); $scope.searchresults = data; 

在HTML中我做到了

 <p class="clsPyType clsChatBoxPadding" ng-bind-html="searchresults.message"></p> 

这就是我得到我的标记呈现