Wie bringt man AngularJS dazu, sich an das title-Attribut eines A-Tags zu binden?

131

Es ist beabsichtigt, einen Produktnamen in der QuickInfo einer Miniaturansicht anzuzeigen. Browser erstellen keinen Tooltip aus "ng-title" oder "ng-attr-title".

Wir verwenden AngularJS Version 1.0.7. Sie können jedem Attribut "ng-" oder "ng-attr" voranstellen, und Angular wird entsprechend gebunden. Es scheint jedoch nicht an den Titel des HTML-Tags "A" zu "binden".

Ex. 1.

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

Erwartetes Ergebnis: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Tatsächliches Ergebnis: <a title="{{product.shortDesc}}" ...>Wir erhalten unerwünschte Klammern im Tooltip.

Ex. 2.

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

Erwartetes Ergebnis: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Tatsächliche Ergebnis: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Wir bekommen weder einen einfachen titleAttirbute noch einen funktionierenden Tooltip.

angularjs Benxamin
quelle

Antworten:

228

Es sieht so aus, als wäre ng-attres eine neue Direktive in AngularJS 1.1.4 , die Sie möglicherweise in diesem Fall verwenden können.

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

Wenn Sie jedoch bei 1.0.7 bleiben, können Sie wahrscheinlich eine benutzerdefinierte Anweisung schreiben, um den Effekt zu spiegeln.

Nhat Nguyen
quelle
53

Manchmal ist es nicht wünschenswert, die Interpolation für das Titelattribut oder für andere Attribute zu verwenden, da diese vor der Interpolation analysiert werden. So:

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

Wenn einem Attribut mit einer Bindung das Präfix ngAttr (denormalisiert als ng-attr-) vorangestellt wird, wird es während der Bindung auf das entsprechende nicht vorfixierte Attribut angewendet. Auf diese Weise können Sie sich an Attribute binden, die sonst von Browsern eifrig verarbeitet würden. Das Attribut wird erst festgelegt, wenn die Bindung abgeschlossen ist. Das Präfix wird dann entfernt:

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

(Stellen Sie sicher, dass Sie keine sehr frühere Version von Angular verwenden.) Hier ist eine Demo-Geige mit v1.2.2:

Fiddle

AlwaysALearner
quelle
3

Das Problem hier ist Ihre Version von AngularJS; ng-attrfunktioniert nicht, da es in Version 1.1.4 eingeführt wurde. Ich bin mir nicht sicher warumtitle="{{product.shortDesc}}" nicht für Sie arbeite, aber ich stelle mir vor, dass dies aus ähnlichen Gründen geschieht (alte Angular-Version). Ich habe dies auf 1.2.9 getestet und es funktioniert für mich.

Die anderen Antworten hier gehören NICHT zu den wenigen Anwendungsfällen für ng-attr! Dies ist eine einfache Situation mit doppelten geschweiften Klammern:

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

Das Suchmodell querylebt in dem durch die ng-controller="whatever"Richtlinie definierten Bereich . Wenn Sie das Abfragemodell an binden möchten <title>, müssen Sie die ngControllerDeklaration in ein HTML-Element verschieben, das sowohl dem Hauptteil als auch den Titelelementen gemeinsam ist:

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

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

solidak
quelle