Как я могу использовать строку в теге изображения `alt` без кодирования AngularJs

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Теперь, как я могу показать title в alt тег изображения без кодирования?!

Answer 1

Я предполагаю, что так как вы используете 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}}">

Answer 2

Для отображения product.title в div, если вам не нравится дополнительный span, вы можете попробовать:

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

где в вашем коде JavaScript вы можете добавить префикс: "Title: " в product.title. (Хотя я не чувствую, что дополнительный промежуток - это плохо)

С другой стороны, я вижу, вы используете ng-bind-html. Является ли "product.title" действительно HTML? Если он содержит несколько стилей, возможно, вы можете изменить свой "myStyle" для управления стилем. Пусть данные будут данными.

Что касается первого изображения, вам не нужно беспокоиться о {{ }}.

Я предполагаю, что причина, по которой вам не нравится {{}}, заключается в том, что они могут отображаться на короткое время до того, как angular сможет отобразить шаблон с данными. Однако, если вы вставите их, браузер не будет отображать содержимое внутри alt, если ваше изображение недоступно (если изображение действительно недоступно, вы можете пересмотреть свои коды, чтобы убедиться, что оно доступно, или отобразить значение по умолчанию). образ)