如何在没有 AngularJs 编码的情况下在图像“alt”标签中使用字符串

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

本文关键字：标签 alt 字符串 情况下 AngularJs 编码 图像      更新时间：2023-09-26

如果我有这个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？！

我假设既然你使用ng-bind-html，product.title是html字符串，而不是文本

您可以创建一个从 html 字符串返回文本的自定义过滤器

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

视图

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

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

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

在javascript代码中，您可以在product.title中添加前缀："Title："。（虽然我不觉得有额外的跨度不好）

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

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

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

相关文章：