AngularJS正在呈现＆LT; BR＆GT;作为文本而不是作为一个新行 [英] AngularJS is rendering <br> as text not as a newline

查看：115
本文介绍了AngularJS正在呈现＆LT; BR＆GT;作为文本而不是作为一个新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我相信这以前有人问，但我无法找到答案。

我有一个来自DB拉，然后渲染内容的AngularJS脚本。除了一对夫妇，我试图来连接它们之间的新行一些话的地方一切正常。

  **的**的script.js
groupedList [aIndex] .CATEGORY = existingCategory +的'\\ n'+ thisCategory;
groupedList [aIndex] .CATEGORY = existingCategory +'＆LT; BR＆GT;'+ thisCategory;

如果我使用上述code我没有看到任何东西，但没有在redered HTML新行的第一行。如果我使用的第二行＆LT; BR＆GT; 得到呈现为文本和输出如下所示：

 本能＆LT; BR＆GT;媒体

而不是

 本能
媒体

我可以张贴完整的脚本，如果这将是有益的，但​​我猜有一些简单的，我只是没有看到。

更新
下面是完整的JS 

 函数qCtrl（$范围，$过滤器，$ HTTP，$超时）{    $ scope.getCategories =函数（）{$ http.post（'quote.cfc方法= getCategories？'）成功（功能（数据）{$ scope.categories =数据;}）; }
    $ scope.getClassifications =函数（）{$ http.post（'quote.cfc方法= getClassifications？'）成功（功能（数据）{$ scope.classifications =数据;}）; }
    $ scope.getIndustries =函数（）{$ http.post（'quote.cfc方法= getIndustries？'）成功（功能（数据）{$ scope.industries =数据;}）; }
    $ scope.getKeywords =函数（）{$ http.post（'quote.cfc方法= getKeywords？'）成功（功能（数据）{$ scope.keywords =数据;}）; }
    $ scope.getSources =函数（）{$ http.post（'quote.cfc方法= getSources？'）成功（功能（数据）{$ scope.sources =数据;}）; }    $ scope.getAllQuotes =函数（）{$ http.post（'？quote.cfc方法= getAllQuotesJoined'）成功（功能（数据）{$ scope.allQuotes =数据;}）; }    $ scope.initScopes =功能（）{
        $ scope.getCategories（）;
        $ scope.getClassifications（）;
        $ scope.getIndustries（）;
        $ scope.getKeywords（）;
        $ scope.getSources（）;
        $ scope.getAllQuotes（）;
    }
    $ scope.initScopes（）;    //搜索引语
    $ scope.filteredQuotes = $ scope.allQuotes;
    $ scope.search = {searchField：''};    $ scope.searchQuote =功能（）{
        VAR过滤器= $过滤器（'过滤器'）;
        VAR searchCrit = $ scope.search;
        VAR newlist = $ scope.allQuotes;
        变种groupedList = [];
        VAR IDLIST = [];
        newlist =滤波器（newlist，{TESTQUOTE：searchCrit.searchField}）;
        对于（I = 0; I＆小于10;我++）{
            aIndex = idList.contains（newlist [I] .TESTIMONIALID）;
            如果（aIndex＆GT; = 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;
                如果（thisKeyword ='​​'和;！＆安培; existingKeyword.indexOf（thisKeyword）== -1）{
                    groupedList [aIndex] .KEYWORD = existingKeyword +' - '+ thisKeyword;
                }
                如果（thisClassification =''和;！＆安培; existingClassification.indexOf（thisClassification）== -1）{
                    groupedList [aIndex] .CLASSIFICATION = existingClassification +的'\\ n'+ thisClassification;
                }
                如果（thisCategory =''和;！＆安培; existingCategory.indexOf（thisCategory）== -1）{
                    groupedList [aIndex] .CATEGORY = existingCategory +'＆LT; BR＆GT;'+ thisCategory;
                }
            }其他{
                idList.push（newlist [I] .TESTIMONIALID）;
                groupedList.push（newlist [I]）;
            }
        }
        $ scope.filteredQuotes = groupedList;
      }
}
Array.prototype.contains =功能（针）{
   为（在此j）条{
       如果（本[J] ==针）复位J;
   }
   返回-1;
}

下面是HTML 

 ＆LT; D​​IV NG重复=Q在filteredQuotes级=以及clearfix＆GT;
                        ＆LT; H3＆GT; {{q.TITLE}}＆LT; / H3 GT＆;
                        ＆LT; D​​IV CLASS =排液的风格=保证金底：为5px;＆GT;
                            ＆LT; D​​IV CLASS =span3以及小whBG＆GT;＆LT; H4＆GT;分类与LT; / H4＆GT; {{q.CLASSIFICATION}}＆LT; / DIV＆GT;
                            ＆LT; D​​IV CLASS =span3以及小whBG pipeHolder＆GT;＆LT; H4＆GT;类别＆LT; / H4＆GT; {{q.CATEGORY}}＆LT; / DIV＆GT;
                            ＆LT; D​​IV CLASS =span3以及小whBG＆GT;＆LT; H4＆GT;关键词＆LT; / H4＆GT; {{q.KEYWORD}}＆LT; / DIV＆GT;
                            ＆LT; D​​IV CLASS =span3以及小whBG＆GT;＆LT; H4＆GT;另外＆LT; / H4＆GT;工业= {{q.INDUSTRY}}＆LT; BR＆GT;来源= {{q.SOURCE}}＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;
                        ＆LT; D​​IV CLASS =以及whBG＆GT; {{q.TESTQUOTE}}＆LT; / DIV＆GT;
                        ＆LT; D​​IV CLASS =微小＆GT;
                            源代码注释：{{q.SOURCECOMMENT}}＆LT; BR＆GT;
                            附加注释：{{q.COMMENT}}
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;


解决方案

，因为我从来没有用过角我可能是错的，但我相信你可能使用 NG-绑定，这将创造只是一个TextNode。

您将需要使用 NG-绑定-HTML 代替。

<一个href=\"http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml\">http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml

更新：看起来你需要使用 NG-结合HTML的不安全='q.category'

<一个href=\"http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe\">http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

下面是一个演示：

http://jsfiddle.net/VFVMv/

I am sure this has been asked before but I cannot find the answer.

I have an AngularJS script that is pulling from a DB and then rendering to content. Everything is working correctly except a couple of places that I am trying to concatenate some words with new lines between them.

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

If I use the first line of the above code I don't see anything but there is not a new line in the redered html. If I use the second line the <br> get rendered as text and the output looks like this:

Instinct<br>Media

instead of 

Instinct
Media

I can post the full script if that would be helpful but I am guessing there is something simple that I am just not seeing.

UPDATE Here is the full 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;
}

Here is the 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>

解决方案

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/

这篇关于AngularJS正在呈现＆LT; BR＆GT;作为文本而不是作为一个新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆