[英]AngularJS is rendering <br> as text not as a newline
我確信以前有人問過這個問題,但我找不到答案。
我有一個 AngularJS 腳本,它從數據庫中提取然后渲染到內容。 除了我試圖用新行連接一些單詞的幾個地方之外,一切都正常工作。
**in the script.js**
groupedList[aIndex].CATEGORY = existingCategory+'\n'+thisCategory;
groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory;
如果我使用上面代碼的第一行,我什么也看不到,但在重新編寫的 html 中沒有新行。 如果我使用第二行, <br>
將呈現為文本,輸出如下所示:
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>
您可以使用\\n
來連接單詞,然后將此樣式應用於容器div。
style="white-space: pre;"
有關詳細信息, 請訪問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>
我可能是錯的,因為我從未使用過Angular,但我相信你可能正在使用ng-bind
,它只會創建一個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
這是一個演示:
您需要使用ng-bind-html-unsafe
...或者您需要包含ngSanitize模塊並使用ng-bind-html
:
使用ng-bind-html-unsafe
如果您信任您正在呈現的HTML源,則使用此選項將呈現您放入其中的任何內容的原始輸出。
<div><h4>Categories</h4><span ng-bind-html-unsafe="q.CATEGORY"></span></div>
或者使用ng-bind-html
如果您不信任HTML的來源(即它的用戶輸入),請使用此選項。 它將清理html,以確保它不包含腳本標記或其他潛在安全風險來源。
確保包含以下內容:
<script src="http://code.angularjs.org/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>
我這樣用過
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>
這就是它讓我的<br/>
標簽渲染
為什么這么復雜?
我這樣簡單地解決了我的問題:
<pre>{{existingCategory+thisCategory}}</pre>
如果字符串包含'\\ n',當我從textarea保存數據時,它會自動生成<br />
。
您還可以使用:
String.fromCharCode(10);
使用 CSS
white-space: pre-line;
這里是工作示例: https : //jsfiddle.net/Nxja/3xtcqdej/1/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.