AngularJS đang hiển thị <br> dưới dạng văn bản không phải là dòng mới

Question

Tôi chắc chắn điều này đã được hỏi trước nhưng tôi không thể tìm thấy câu trả lời.

Tôi có một tập lệnh AngularJS được lấy từ một DB và sau đó hiển thị nội dung. Mọi thứ đều hoạt động chính xác, ngoại trừ một vài nơi mà tôi đang cố gắng nối một số từ với các dòng mới giữa chúng.

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

Nếu tôi sử dụng dòng đầu tiên của mã trên, tôi không thấy gì ngoài việc không có dòng mới trong html được đánh dấu lại. Nếu tôi sử dụng dòng thứ hai <br> nhận được kết xuất dưới dạng văn bản và đầu ra trông như thế này:

Instinct<br>Media 

thay vì

Instinct 
Media 

tôi có thể gửi kịch bản đầy đủ nếu điều đó sẽ rất hữu ích, nhưng tôi đoán có một cái gì đó đơn giản mà tôi chỉ không nhìn thấy.

CẬP NHẬT Dưới đây là toàn bộ 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; 
} 

Dưới đây là 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

Tôi có thể sai vì tôi chưa từng sử dụng kiễu góc, nhưng tôi tin rằng bạn có thể sử ng-bind, sẽ chỉ tạo một TextNode.

Thay vào đó, bạn sẽ muốn sử dụng ng-bind-html.

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

Cập nhật: Dường như bạn sẽ cần phải sử dụng ng-bind-html-unsafe='q.category'

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

Dưới đây là một bản demo:

http://jsfiddle.net/VFVMv/

Answer 2

Bạn cần phải hoặc sử dụng ng-bind-html-unsafe ... hoặc bạn cần phải bao gồm các module ngSanitize và sử dụng ng-bind-html:

với ng-bind-html-không an toàn

Sử dụng này nếu bạn tin tưởng vào nguồn của HTML bạn đang render nó sẽ làm cho đầu ra thô của bất cứ thứ gì bạn đưa vào nó.

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

---

OR với ng-bind-html

Sử dụng này nếu bạn không tin tưởng vào nguồn của HTML (ví dụ đó là người dùng nhập vào). Nó sẽ khử trùng html để đảm bảo nó không bao gồm những thứ như thẻ tập lệnh hoặc các nguồn rủi ro bảo mật tiềm ẩn khác.

Hãy chắc chắn rằng bạn bao gồm này:

<script src="http://code.angularjs.org/1.0.4/angular-sanitize.min.js"></script> 

Sau đó tham khảo nó trong mô-đun ứng dụng của bạn:

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

sau đó sử dụng nó:

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

Answer 3

Tôi đã sử dụng như

này

function chatSearchCtrl($scope, $http,$sce) { 
// some more my code 

// take this 
data['message'] = $sce.trustAsHtml(data['message']); 

$scope.searchresults = data; 

và trong html tôi đã làm

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

thats nó tôi nhận được thẻ <br/> tôi render

Answer 4

Bạn có thể sử dụng \n để nối từ và sau đó áp dụng phong cách này để div container.

style="white-space: pre;" 

Thông tin thêm có thể được tìm thấy tại 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>

Answer 5

Tại sao rất phức tạp?

tôi giải quyết vấn đề của tôi theo cách này đơn giản:

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

Nó sẽ làm cho <br /> tự động nếu chuỗi chứa '\ n' có chứa khi tôi đã lưu dữ liệu từ textarea.