Jak sprawić, by AngularJS wiązał się z atrybutem tytułu tagu A?

Question 1

Celem jest, aby nazwa produktu pojawiała się w podpowiedzi miniatury. Przeglądarki nie tworzą podpowiedzi z „ng-title” lub „ng-attr-title”.

Używamy AngularJS w wersji 1.0.7. Możesz poprzedzić dowolny atrybut ciągiem „ng-” lub „ng-attr”, a Angular odpowiednio się połączy. Jednak nie wydaje się "wiązać" się z tytułem tagu "A" HTML.

Dawny. 1.

Kod: <a title="{{product.shortDesc}}" ...>

Spodziewany wynik: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Rzeczywisty wynik: <a title="{{product.shortDesc}}" ...>w podpowiedzi pojawiają się niepożądane szelki.

Dawny. 2.

Kod: <a ng-attr-title="{{product.shortDesc}}" ...>

Spodziewany wynik: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Aktualny rezultat: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Nie otrzymujemy zwykłego titleatrybutu ani działającej podpowiedzi.

Question 2

Wygląda na to, że ng-attrjest to nowa dyrektywa w AngularJS 1.1.4 , której możesz prawdopodobnie użyć w tym przypadku.

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

Jeśli jednak pozostaniesz przy wersji 1.0.7, prawdopodobnie możesz napisać własną dyrektywę, aby odzwierciedlić efekt.

Question 3

Czasami nie jest pożądane stosowanie interpolacji do atrybutu tytułu lub jakichkolwiek innych atrybutów, ponieważ są one analizowane przed wykonaniem interpolacji. Więc:

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

Jeśli atrybut z powiązaniem jest poprzedzony prefiksem ngAttr (zdenormalizowany jako ng-attr-), to podczas wiązania zostanie zastosowany do odpowiedniego atrybutu bez prefiksu. Pozwala to na tworzenie powiązań z atrybutami, które w innym przypadku byłyby chętnie przetwarzane przez przeglądarki. Atrybut zostanie ustawiony tylko po zakończeniu wiązania. Prefiks jest następnie usuwany:

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

(Upewnij się, że nie używasz wcześniejszej wersji Angular). Oto przykładowe skrzypce przy użyciu wersji 1.2.2:

Fiddle

Question 4

Problem dotyczy twojej wersji AngularJS; ng-attrnie działa, ponieważ został wprowadzony w wersji 1.1.4. Nie jestem pewien, dlaczego title="{{product.shortDesc}}"nie działa dla Ciebie, ale wyobrażam sobie, że dzieje się tak z podobnych powodów (stara wersja Angulara). Przetestowałem to na 1.2.9 i działa dla mnie.

Jeśli chodzi o inne odpowiedzi tutaj, NIE jest to jeden z niewielu przypadków użycia ng-attr! To jest prosta sytuacja z podwójnym nawiasem klamrowym:

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

Question 5

Spójrz na skrzypce tutaj, aby uzyskać szybką odpowiedź

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

Wyświetla tytuł nad elementami warunkowo za pomocą Angular JS

Question 6

Model wyszukiwania znajduje się queryw zakresie określonym przez ng-controller="whatever"dyrektywę. Więc jeśli chcesz powiązać model zapytania <title>, musisz przenieść ngControllerdeklarację do elementu HTML, który jest wspólnym elementem nadrzędnym zarówno dla elementów body, jak i title:

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

Odniesienie: https://docs.angularjs.org/tutorial/step_03