Come si fa ad associare AngularJS all'attributo title di un tag A?

131

L'intento è quello di far apparire un nome prodotto nella descrizione comando di una miniatura. I browser non creano una descrizione comandi da "ng-title" o "ng-attr-title".

Stiamo usando AngularJS versione 1.0.7. Puoi anteporre qualsiasi attributo con "ng-" o "ng-attr" e Angular si legherà di conseguenza. Tuttavia, non sembra "legarsi" all'attributo titolo del tag HTML "A".

Ex. 1.

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

Risultato atteso: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Risultato effettivo: <a title="{{product.shortDesc}}" ...>nella descrizione comandi vengono visualizzate parentesi graffe indesiderate.

Ex. 2.

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

Risultato atteso: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

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

Non otteniamo un semplice titleattirbute, né otteniamo un suggerimento funzionante.

angularjs

— Benxamin
fonte

228

Sembra che ng-attrsia una nuova direttiva in AngularJS 1.1.4 che puoi eventualmente usare in questo caso.

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

Tuttavia, se rimani con 1.0.7, probabilmente puoi scrivere una direttiva personalizzata per rispecchiare l'effetto.

— Nhat Nguyen
fonte

53

A volte non è desiderabile utilizzare l'interpolazione sull'attributo title o su qualsiasi altro attributo, poiché vengono analizzati prima che avvenga l'interpolazione. Così:

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

Se un attributo con un'associazione è preceduto dal prefisso ngAttr (denormalizzato come ng-attr-), durante l'associazione verrà applicato all'attributo non prefissato corrispondente. Ciò consente di associare attributi che altrimenti verrebbero elaborati con entusiasmo dai browser. L'attributo verrà impostato solo al termine dell'associazione. Il prefisso viene quindi rimosso:

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

(Assicurati di non utilizzare una versione molto precedente di Angular). Ecco un violino demo usando v1.2.2:

Fiddle

— AlwaysALearner
fonte

3

Il problema qui è la tua versione di AngularJS; ng-attrnon funziona a causa del fatto che è stato introdotto nella versione 1.1.4. Non sono sicuro del perché non funzioni title="{{product.shortDesc}}"per te, ma immagino che lo sia per ragioni simili (vecchia versione angolare). Ho provato questo su 1.2.9 e funziona per me.

Per quanto riguarda le altre risposte qui, questo NON è tra i pochi casi d'uso per ng-attr! Questa è una semplice situazione a doppia parentesi graffa:

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

— omikes
fonte

1

Guarda il violino qui per una risposta rapida

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

Visualizza il titolo sugli elementi in modo condizionale usando JS angolare

— Sundara Prabu
fonte

-4

Il querymodello di ricerca vive nell'ambito definito dalla ng-controller="whatever"direttiva. Quindi, se si desidera associare il modello di query<title> , è necessario spostare la ngControllerdichiarazione in un elemento HTML che sia un genitore comune sia agli elementi body che title:

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

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

— solidak
fonte