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

131

Цель состоит в том, чтобы название продукта отображалось во всплывающей подсказке эскиза. Браузеры не создают всплывающую подсказку из «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атрибута, ни рабочей всплывающей подсказки.

angularjs Benxamin
источник

Ответы:

228

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

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

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

Нхат Нгуен
источник
53

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

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

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

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

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

Fiddle

AlwaysALearner
источник
3

Проблема здесь в вашей версии AngularJS; ng-attrне работает из-за того, что был представлен в версии 1.1.4. Я не уверен, почемуtitle="{{product.shortDesc}}" у вас не работает, но я полагаю, что это по схожим причинам (старая версия Angular). Я тестировал это на 1.2.9, и у меня это работает.

Что касается других ответов здесь, это НЕ из немногих вариантов использования ng-attr! Это простая ситуация с двойными фигурными скобками:

<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />
omikes
источник
-4

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

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

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

solidak
источник