AngularJS正在渲染<br>作为文本而不是换行

AngularJS is rendering <br> as text not as a newline

本文关键字:文本 换行 br AngularJS lt gt      更新时间:2023-09-26

我确信以前有人问过这个问题,但我找不到答案。

我有一个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

这里有一个演示:

http://jsfiddle.net/VFVMv/

您需要使用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-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>

为什么这么复杂?

我用这种方式简单地解决了我的问题:

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

如果字符串包含当我从文本区域保存数据时包含的'''n',它将自动生成<br />

我用过这样的

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;

以下是工作示例:https://jsfiddle.net/Nxja/3xtcqdej/1/