AngularJS将"
"呈现为文本而不是换行符。

18 浏览
0 Comments

AngularJS将"
"呈现为文本而不是换行符。

我确定这个问题以前被问过,但我找不到答案。

我有一个AngularJS脚本,它从数据库中获取数据然后渲染内容。除了我试图在一些地方将一些词语连接起来并在它们之间添加换行符之外,一切正常。

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

如果我使用上面代码的第一行,我什么也看不到,但在渲染的HTML中没有换行符。如果我使用第二行,
会被渲染为文本,输出看起来像这样:

Instinct
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+''+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代码:

                        

{{q.TITLE}}

分类

{{q.CLASSIFICATION}}

类别

{{q.CATEGORY}}

关键词

{{q.KEYWORD}}

其他

行业 = {{q.INDUSTRY}}来源 = {{q.SOURCE}} {{q.TESTQUOTE}} 来源评论:{{q.SOURCECOMMENT}} 其他评论:{{q.COMMENT}}

0
0 Comments

在AngularJS中,当使用ng-bind-html指令时,
标签会被渲染为文本而不是换行符。这个问题的出现是因为ng-bind-html默认会对HTML进行安全过滤,避免包含潜在的安全风险如