使用 Array.join(' ')答案

【问题标题】：Using Array.join(' ')使用 Array.join(' ')
【发布时间】：2016-06-03 23:47:52
【问题描述】：

这不起作用有什么原因吗？：

this.categoriesId = $rootScope.categoriesList.map(function(obj) {
  return obj.id;
}).join('<br />');
this.categoriesName = $rootScope.categoriesList.map(function(obj) {
  return obj.name;
}).join('<br />');

在视图中：

<b>Categories ID :</b><br/><br/>
{{h.categoriesId}}
<hr>
<b>Categories Name :</b><br/><br/>
{{h.categoriesName}}

没有换行符，  不会被解释。

我该如何解决这个问题？

【问题讨论】：

你的意思是 显示为文本？
我建议你使用ng-repeat指令
AngularJS : Insert HTML into view的可能重复

标签： javascript html arrays angularjs string-formatting

【解决方案1】：

因为 Angular 在将字符串插入 DOM 之前会对其进行转义，以防止 XSS 攻击。

乱七八糟的修复

使用ng-bind-html 指令按原样插入HTML。

<span ng-bind-html="h.categoriesName"></span>

确保包含$sanitize 服务，ng-bind-html 将自动清理您的字符串以确保它在其上下文中是安全的。

清理修复

使用ng-repeat 遍历列表，无需担心将标记插入到您的字符串中。

<b>Categories Name :</b><br/><br/>
<span ng-repeat="name in categoriesList">
  {{name}}<br />
</span>

【讨论】：

$sce 会清理ng-bind-html。你没有考虑到这一点。答案具有误导性
@charlietfl 已更新。
如果不包含 sanitize 也不能使用它，因为它会抛出错误并且什么也不输出。所以实际上Safe Fix 仍然具有误导性
是的，明白了：“确保包含 $sanitize 服务”
稍作修改即可使用： {{category.name}}

【解决方案2】：

{{}} 仅被解释为文本，而不是 html

使用ng-repeat，无需将数组解析为html

【讨论】：

【解决方案3】：

试试这个方法：

<b>Categories Name :</b><br/><br/>
<span ng-bind-html="h.categoriesName"><span>

或创建地图并加入过滤器：

app
.filter('map', function () {
    return function (arr, prop) {
        return arr.map(function (item) {
            return item[prop];
        });
    };
})
.filter('join', function () {
    return function (arr, sep) {
        return arr.join(sep);
    };
});

HTML：

<span ng-bind-html="categoriesList | map: 'name' | join '<br/>'"><span>

【讨论】：