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

131

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.

angularjs Benxamin
źródło

Odpowiedzi:

228

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.

Nhat Nguyen
źródło
53

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

AlwaysALearner
źródło
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" />
omikes
źródło
-4

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

solidak
źródło