如何在不按 AngularJs 编码的情况下使用图像 `alt` 标签中的字符串

Question

如果我有这个 AngularJs 代码：

<div class="myStyle">
    TITLE:
    {{product.title}}
</div>

我想在不编码的情况下显示 title。所以我知道这是一个解决方案：

<div class="myStyle">
    TITLE:
    <span ng-bind-html="product.title"></span>
</div>

但我不喜欢额外的 <span> 代码！

此外，如果我有此代码：

<img src="img.jpg" alt="{{product.title}}">

我不能使用额外的 span，现在我如何在没有编码的情况下在图像的 alt 标签中显示 title？！

Answer 1

我假设因为您使用 ng-bind-html，所以 product.title 是 html string ，而不是 text

您可以创建一个自定义过滤器，returns 来自 html 字符串的文本

app.filter('htmlToText', function(){
  return function(html){        
     return angular.element('<div>').append(html || '').text();
  };
});

查看

<img src="img.jpg" alt="{{product.title | htmlToText}}">

Answer 2

为了在div中显示product.title，如果您不喜欢额外的跨度，您可以尝试：

<div class="myStyle" ng-bind="product.title"></div>

在您的 javascript 代码中，您可以添加前缀："Title: " 到 product.title。（虽然我不觉得多一个span不好）

另外一个旁注，我看到你正在使用 ng-bind-html。 "product.title"真的是html吗？如果它包含一些样式，也许你可以修改你的 "myStyle" 来控制样式。让数据成为数据。

对于图一，您可能不需要担心 {{ }}。

我猜您不喜欢 {{ }} 的原因是它们可能会在 angular 可以使用数据呈现模板之前短暂显示。但是，如果你把它们放在中，浏览器将不会显示 alt 里面的内容，除非你的图像不可用（如果图像真的不可用，你可以考虑重新访问你的代码以确保它可用，或者显示一个默认的图片）

How can I use a string in image `alt` tag without encode by AngularJs