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

Question

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   lt a title    product shortDesc        gt   Expected result   lt a title  Canon Powershot XS50 12MB Digital Camera      gt   Actual result   lt a title    product shortDesc        gt  We get undesired braces in the tooltip   Ex  2   Code   lt a ng-attr-title    product shortDesc        gt   Expected result   lt a title  Canon Powershot XS50 12MB Digital Camera      gt   Actual result   lt a ng-attr-title  Canon Powershot XS50 12MB Digital Camera      gt    We do not get a plain title attirbute  nor do we get a working tooltip

User · Accepted Answer

It looks like ng-attr is a new directive in AngularJS 1 1 4 that you can possibly use in this case     lt  -- example -- gt   lt a ng-attr-title    product shortDesc    gt  lt  a gt    However  if you stay with 1 0 7  you can probably write a custom directive to mirror the effect

User · Answer

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    lt a title    product shortDesc    ng-bind  product shortDesc    gt

User · Answer

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  lt title gt   you have to move the ngController declaration to an HTML element that is a common parent to both the body and title elements     lt html ng-app  phonecatApp  ng-controller  PhoneListCtrl  gt    Ref  https   docs angularjs org tutorial step 03

User · Answer

Look at the fiddle here for a quick answer   data-ng-attr-title    d age  gt  5    My age is greater than threshold           Displays Title over elements conditionally using Angular JS

User · Answer

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    lt  -- dont do this -- gt   lt  --  lt a title    product shortDesc        gt  -- gt    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    lt  -- do this -- gt   lt a ng-attr-title    product shortDesc        gt     Ensure that you are not using a very earlier version of Angular   Here s a demo fiddle using v1 2 2   Fiddle

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

Examples related to angularjs