¿Cómo hace que AngularJS se una al atributo de título de una etiqueta A?

131

La intención es que aparezca un nombre de producto en la información sobre herramientas de una miniatura. Los navegadores no crean información sobre herramientas a partir de "ng-title" o "ng-attr-title".

Estamos utilizando AngularJS versión 1.0.7. Puede anteponer cualquier atributo con "ng-" o "ng-attr" y Angular se unirá en consecuencia. Sin embargo, no parece "vincularse" al título de la etiqueta HTML "A".

Ex. 1)

Código: <a title="{{product.shortDesc}}" ...>

Resultado Esperado: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Resultado real: <a title="{{product.shortDesc}}" ...>Obtenemos llaves no deseadas en la información sobre herramientas.

Ex. 2)

Código: <a ng-attr-title="{{product.shortDesc}}" ...>

Resultado Esperado: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

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

No obtenemos un titleattirbute simple , ni obtenemos información sobre herramientas que funcione.

angularjs Benxamin
fuente

Respuestas:

228

Parece que ng-attres una nueva directiva en AngularJS 1.1.4 que posiblemente puede usar en este caso.

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

Sin embargo, si te quedas con 1.0.7, probablemente puedas escribir una directiva personalizada para reflejar el efecto.

Nhat Nguyen
fuente
53

A veces no es deseable utilizar la interpolación en el atributo de título o en cualquier otro atributo, ya que se analizan antes de que tenga lugar la interpolación. Entonces:

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

Si un atributo con un enlace tiene el prefijo ngAttr prefijo (desnormalizado como ng-attr-), durante el enlace se aplicará al atributo no prefijado correspondiente. Esto le permite vincularse a atributos que de otro modo serían procesados ​​con entusiasmo por los navegadores. El atributo se establecerá solo cuando se complete el enlace. Luego se elimina el prefijo:

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

(Asegúrese de no estar utilizando una versión muy anterior de Angular). Aquí hay un violín de demostración usando v1.2.2:

Fiddle

AlwaysALearner
fuente
3

El problema aquí es su versión de AngularJS; ng-attrno funciona debido a que se introdujo en la versión 1.1.4. No estoy seguro de por quétitle="{{product.shortDesc}}" no funciona para usted, pero imagino que es por razones similares (antigua versión angular). Probé esto en 1.2.9 y está funcionando para mí.

En cuanto a las otras respuestas aquí, ¡este NO está entre los pocos casos de uso para ng-attr! Esta es una situación simple de doble rizado:

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

El querymodelo de búsqueda vive en el ámbito definido por la ng-controller="whatever"directiva. Entonces, si desea vincular el modelo de consulta <title>, debe mover la ngControllerdeclaración a un elemento HTML que sea un elemento primario común para los elementos del cuerpo y del título:

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

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

solidak
fuente