Benxamin Benxamin - 6 months ago 88
AngularJS Question

How do you get AngularJS to bind to the title attribute of an A tag?

The intent is to have a product name appear in the tooltip of a thumbnail.
Browsers do not create a tooltip from "ng-title" or "ng-attr-title."

We are using AngularJS version 1.0.7.
You can prepend any attribute with "ng-" or "ng-attr" and Angular will bind accordingly. However, it doesn't seem to "bind" to the title attirbute of the HTML "A" tag.

Ex. 1.

Code:

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


Expected result:
<a title="Canon Powershot XS50 12MB Digital Camera" ...>


Actual result:
<a title="{{product.shortDesc}}" ...>
We get undesired braces in the tooltip.

Ex. 2.

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


Expected result:
<a title="Canon Powershot XS50 12MB Digital Camera" ...>


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


We do not get a plain
title
attirbute, nor do we get a working tooltip.

Answer

It looks like ng-attr is a new directive in AngularJS 1.1.4 that you can possibly use in this case.

https://github.com/angular/angular.js/commit/cf17c6af475eace31cf52944afd8e10d3afcf6c0

However, if you stay with 1.0.7, you can probably write a custom directive to mirror the effect.

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