Angular JS는 렌더링 중입니다.Angular JS는 렌더링 중입니다.줄바꿈이 아닌 텍스트로줄바꿈이 아닌 텍스트로

Angular JS는 렌더링 중입니다.
줄바꿈이 아닌 텍스트로

이것은 분명히 이전에 물어본 적이 있지만 답을 찾을 수 없습니다.

나는 Angular를 가지고 있다.DB에서 가져온 다음 컨텐츠로 렌더링하는 JS 스크립트입니다.몇 개의 단어와 새 줄을 연결하려고 하는 곳을 제외하고는 모든 것이 제대로 작동하고 있습니다.

 **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-bindTextNode만 생성됩니다.

사용하고 싶을 것입니다.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/

다음 중 하나를 사용해야 합니다.ng-bind-html-unsafe또는 ngSanitize 모듈을 포함하여ng-bind-html:

ng-syslog-syslog를 사용하여

렌더링하는 HTML의 소스를 신뢰할 수 있는 경우, HTML에 입력한 HTML의 원시 출력을 렌더링합니다.

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

---

ng-bind-html을 사용한 OR

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>

왜 그렇게 복잡해?

저는 이 방법으로 문제를 간단히 해결했습니다.

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

할 수 있을 것이다<br />텍스트 영역에서 데이터를 저장할 때 문자열에 '\n'이 포함된 경우 자동으로 표시됩니다.

이렇게 썼는데

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/>렌더링된 태그

다음 항목도 사용할 수 있습니다.

String.fromCharCode(10);

CSS 사용

white-space: pre-line;

여기 si의 작업 예: https://jsfiddle.net/Nxja/3xtcqdej/1/

언급URL : https://stackoverflow.com/questions/14963444/angularjs-is-rendering-br-as-text-not-as-a-newline