CODEWITHSUNDEEP
angularjs
Benxamin
Benxamin

Reputation: 4820

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.

Upvotes: 141

Views: 145387

Answers (5)

Nhat Nguyen
Nhat Nguyen

Reputation: 2516

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

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

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

Upvotes: 239

Sundara Prabu
Sundara Prabu

Reputation: 2719

Look at the fiddle here for a quick answer 

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

Displays Title over elements conditionally using Angular JS

Upvotes: 1

omikes
omikes

Reputation: 8513

The issue here is your version of AngularJS; ng-attr is not working due to the fact that it was introduced in version 1.1.4. I am unsure as to why title="{{product.shortDesc}}" isn't working for you, but I imagine it is for similar reasons (old Angular version). I tested this on 1.2.9 and it is working for me.

As for the other answers here, this is NOT among the few use cases for ng-attr! This is a simple double-curly-bracket situation:

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

Upvotes: 5

solidak
solidak

Reputation: 5081

The search query model lives in the scope defined by the ng-controller="whatever" directive. So if you want to bind the query model to <title>, you have to move the ngController declaration to an HTML element that is a common parent to both the body and title elements:

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

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

Upvotes: -4

AlwaysALearner
AlwaysALearner

Reputation: 43947

Sometimes it is not desirable to use interpolation on title attribute or on any other attributes as for that matter, because they get parsed before the interpolation takes place. So:

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

If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers. The attribute will be set only when the binding is done. The prefix is then removed:

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

(Ensure that you are not using a very earlier version of Angular). Here's a demo fiddle using v1.2.2:

Fiddle

Upvotes: 54

Related Questions