AngularJS 正在渲染 作为文本而不是换行符 [英] AngularJS is rendering as text not as a newline

查看：21 发布时间：2021/11/9 3:46:40 javascript angularjs

本文介绍了AngularJS 正在渲染 作为文本而不是换行符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我确定以前有人问过这个问题，但我找不到答案.

我有一个 AngularJS 脚本，它从数据库中提取然后渲染到内容.除了几个地方我试图用新行在它们之间连接一些单词之外，一切都正常工作.

 **在 script.js 中**groupedList[aIndex].CATEGORY = existingCategory+'\n'+thisCategory;groupedList[aIndex].CATEGORY = existingCategory+'
'+thisCategory;

如果我使用上面代码的第一行，我什么也看不到，但在重新编写的 html 中没有新行.如果我使用第二行，  将呈现为文本，输出如下所示:

Instinct
媒体

代替

本能媒体

如果有帮助的话，我可以发布完整的脚本，但我猜有一些我没有看到的简单内容.

更新这是完整的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 = 函数 (){$scope.getCategories();$scope.getClassifications();$scope.getIndustries();$scope.getKeywords();$scope.getSources();$scope.getAllQuotes();}$scope.initScopes();//搜索报价$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+'
'+thisCategory;}} 别的 {idList.push(newlist[i].TESTIMONIALID);groupedList.push(newlist[i]);}}$scope.filteredQuotes = groupedList;}}Array.prototype.contains = 函数(针){for (j 在这) {如果 (this[j] == 针) 返回 j;}返回-1；}

这是 HTML


<h3>{{q.TITLE}}</h3><div class="row-fluid" style="margin-bottom:5px;"><div class="span3 well-small whBG"><h4>分类</h4>{{q.CLASSIFICATION}}</div><div class="span3 well-small whBG pipeHolder"><h4>Categories</h4>{{q.CATEGORY}}</div><div class="span3 well-small whBG"><h4>关键词</h4>{{q.KEYWORD}}</div><div class="span3 well-small whBG"><h4>Additional</h4>Industry = {{q.INDUSTRY}}<br>Source = {{q.SOURCE}}</div>
<div class="well whBG">{{q.TESTQUOTE}}</div><div class="tiny">来源评论:{{q.SOURCECOMMENT}}
附加评论:{{q.COMMENT}}

解决方案

我可能是错的，因为我从未使用过 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/

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   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 正在渲染 作为文本而不是换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

AngularJS 正在渲染 <br>作为文本而不是换行符 [英] AngularJS is rendering <br> as text not as a newline

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AngularJS 正在渲染 &lt;br&gt;作为文本而不是换行符 [英] AngularJS is rendering &lt;br&gt; as text not as a newline

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

AngularJS 正在渲染 <br>作为文本而不是换行符 [英] AngularJS is rendering <br> as text not as a newline

登录关闭