javascript - 使用 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 />');

在 View 中:

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

没有换行符，<br />不被解释。

我该如何解决这个问题？

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>