AngularJSは改行文字ではなくテキストとして<br>をレンダリングしています

Question

これは以前に尋ねられたと確信していますが、答えが見つかりません。

DBから取得してコンテンツにレンダリングするAngularJSスクリプトがあります。私はそれらの間に新しい行をいくつかの単語を連結しようとしているいくつかの場所を除いて、すべてが正しく動作しています。

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

上記のコードの最初の行を使用しても、私は何も表示されませんが、改訂されたhtmlに新しい行はありません。私は<br>がテキストとして表示されます第二ラインを使用すると、出力は次のようになります場合：

Instinct<br>Media 

代わりの

Instinct 
Media 

それが参考になるかどうかは、完全なスクリプトを投稿することができますが、私は推測しています私が見ていない単純なことがあります。ここで

UPDATE はここ

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

でいっぱいのjsでありますng-bindは、TextNodeだけを作成します。

代わりにng-bind-htmlを使用します。あなたはどちらかを使用する必要があり

http://jsfiddle.net/VFVMv/

Answer 2

：

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-バインド-HTML-危険な

あなたがHTMLのソースを信頼している場合、あなたはそれをしますレンダリングしている、これを使用しますあなたがそれに入れたものの生の出力をレンダリングします。

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

---

OR

NG-バインドHTMLであなたが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> 

Answer 3

私はこの

のように使ってきた

は、あなたがこれを含めていることを確認します

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

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

$scope.searchresults = data; 

とhtmlで私はそれは私が私の<br/>タグはあなたが言葉を連結して、コンテナのdivにこのスタイルを適用するために\nを使用することができます

Answer 4

をレンダリングし得る

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

のthatsをしました。

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>

Answer 5

なぜそんなに複雑で見つけることができますか？

私はこの方法で、単純に私の問題を解決しました：

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

を文字列は、私はテキストエリアからのデータを保存されたときに含まれている「\ n」を含んでいる場合には、自動的に<br />を行います。