Как заставить AngularJS связываться с атрибутом title тега A?

Цель состоит в том, чтобы название продукта отображалось в подсказке миниатюры. Браузеры не создают всплывающую подсказку из "ng-title" или "ng-attr-title".

Мы используем версию AngularJS 1.0.7. Вы можете добавить любой атрибут с помощью "ng-" или "ng-attr" и Angular будет привязываться соответствующим образом. Тем не менее, он не кажется "привязанным" к атрибуту заголовка тега HTML "A".

Ex. 1.

Код: <a title="{{product.shortDesc}}" ...>

Ожидаемый результат: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Фактический результат: <a title="{{product.shortDesc}}" ...> Мы получаем нежелательные фигурные скобки во всплывающей подсказке.

Ex. 2.

Код: <a ng-attr-title="{{product.shortDesc}}" ...>

Ожидаемый результат: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Фактический результат: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Мы не получаем простой title attirbute, и не получаем рабочей всплывающей подсказки.

Ответ 1

Похоже, что ng-attr - это новая директива в AngularJS 1.1.4, которую вы можете использовать в этом случае.

https://github.com/angular/angular.js/commit/cf17c6af475eace31cf52944afd8e10d3afcf6c0

Однако, если вы останетесь с 1.0.7, вы, вероятно, можете написать настраиваемую директиву для отражения эффекта.

<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>

Ответ 2

Иногда нежелательно использовать интерполяцию по атрибуту title или по каким-либо другим атрибутам, поскольку это важно, потому что они анализируются перед интерполяцией. Итак:

<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->

Если атрибут с привязкой префикс префикс ngAttr (денормализованный как ng-attr-), то во время привязки будет применен к соответствующему атрибуту unprefixed. Это позволяет вам привязываться к атрибутам, которые в противном случае были бы обработаны браузерами. Атрибут будет установлен только тогда, когда привязка будет выполнена. Затем префикс удаляется:

<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>

(Убедитесь, что вы не используете более раннюю версию Angular). Здесь демонстрационная скрипта с использованием v1.2.2:

Fiddle

Ответ 3

Модель поиска query находится в области, определяемой директивой ng-controller="whatever". Поэтому, если вы хотите привязать модель запроса к <title>, вам нужно переместить объявление ngController в элемент HTML, который является общим родителем как для элемента тела, так и для заголовков:

<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">

Ссылка: https://docs.angularjs.org/tutorial/step_03