Як змусити AngularJS прив’язати до атрибута заголовка тегу A?

131

Завдання полягає в тому, щоб назва продукту відображалася в підказці ескізу. Браузери не створюють підказку з "ng-title" або "ng-attr-title".

Ми використовуємо AngularJS версії 1.0.7. Ви можете додати будь-який атрибут з "ng-" або "ng-attr", і Angular відповідатиме відповідним чином. Однак, схоже, це не "прив'язується" до атрибуту заголовка тегу HTML "A".

Вих. 1.

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

Очікуваний результат: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Фактичний результат. <a title="{{product.shortDesc}}" ...>У підказці ми отримуємо небажані брекети.

Вих. 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

— Бенксамін
джерело

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). Ось демонстраційна скрипка за допомогою версії 1.2:

Fiddle

— ЗавждиAnerner
джерело

3

Проблема тут - ваша версія AngularJS; ng-attrне працює через те, що він був введений у версії 1.1.4. Я не впевнений, чому title="{{product.shortDesc}}"це не працює для вас, але я вважаю, що це з подібних причин (стара кутова версія). Я перевірив це на 1.2.9, і це працює на мене.

Щодо інших відповідей тут, то це НЕ серед кількох випадків використання ng-attr! Це проста ситуація з подвійною фігурною дужкою:

<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />

— омікс
джерело

1

Подивіться тут на загадку для швидкої відповіді

data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"

Відображає заголовок над елементами умовно за допомогою кутового JS

— Сундара Прабу
джерело

-4

Модель пошуку queryживе в межах, визначених ng-controller="whatever"директивою. Отже, якщо ви хочете прив’язати модель запиту до <title>, вам потрібно перенести ngControllerдекларацію до елемента HTML, який є спільним батьківським для елементів body і title:

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

Посилання: https://docs.angularjs.org/tutorial/step_03

— солідак
джерело