使用Array.join('<br />')

Question

这个不起作用的原因是什么？

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}}

这里没有换行，<br /> 标签没有被解释。

我该怎么解决这个问题？

- Ellone

---

你的意思是 <br /> 会显示为文本吗？ - Hacketo

我建议你使用ng-repeat指令。 - Tushar

可能是AngularJS：将HTML插入视图的重复问题。 - Hacketo

Answer 1

因为Angular在将字符串插入DOM之前对其进行HTML转义，以防止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>

- Dan Prince

---

$sce对ng-bind-html进行了清理。你没有考虑到这一点。答案是误导性的。 - charlietfl

@charlietfl 已更新。 - Dan Prince

也不能在没有包含清理的情况下使用它，否则会抛出错误并且不会输出任何内容。因此从实际角度来看，“安全修复”仍然是误导性的。 - charlietfl

没错，明白了：“确保包含$sanitize服务”。 - Dan Prince

通过轻微的修改，已经让它正常工作了：<span ng-repeat="category in $root.categoriesList"> {{category.name}}<br /> </span> - Ellone

@Ellone 应该尽量避免使用 $rootScope 来存储你的数据。 - charlietfl

Answer 2

{{}} 只被解释为文本，而不是HTML

使用 ng-repeat，不需要将数组解析为HTML

- charlietfl

Answer 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>

- karaxuna