48

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

DB からプルしてコンテンツにレンダリングする AngularJS スクリプトがあります。いくつかの単語を新しい行で連結しようとしているいくつかの場所を除いて、すべてが正しく機能しています。

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

上記のコードの最初の行を使用すると、何も表示されませんが、再描画された html に新しい行はありません。2 行目を使用する<br>と、テキストとしてレンダリングされ、出力は次のようになります。

Instinct<br>Media

それ以外の

Instinct
Media

それが役立つ場合は、完全なスクリプトを投稿できますが、私が見ていない単純なものがあると推測しています。

UPDATE ここに完全な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>
4

6 に答える 6

41

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.

You will want to use ng-bind-html instead.

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

Update: It looks like you'll need to use ng-bind-html-unsafe='q.category'

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

Here's a demo:

http://jsfiddle.net/VFVMv/

于 2013-02-19T17:23:59.607 に答える
25

...を使用するか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>
于 2013-02-19T19:03:20.647 に答える
3

なぜそんなに複雑なのですか？

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

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

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

于 2016-01-11T06:57:28.207 に答える
2

私はこのように使用しました

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/>タグがレンダリングされます

于 2015-02-18T05:43:36.470 に答える